我如何使用Ember创建数据驱动的文本输入

How can I create data-driven text inputs with Ember?

本文关键字：文本 输入 数据驱动 创建 何使用 Ember      更新时间：2023-09-26

我正在尝试创建几个输入，这些输入可以立即更新我的Ember Data模型，而不需要提交操作。例如

Person
First Name  [Placeholder: Enter first name ]
Last Name   [Placeholder: Enter last name  ]
City        [Placeholder: Enter city       ]

我通过在Ember TextField子类组件周围创建包装器组件来解决这个问题，并使其工作，但有两个主要问题:

  1. 占位符不工作，因为我试图实现他们(见下文)-似乎我可以做到这一点更容易使用TextSupport mixin，但我不知道如何使用它。
  2. 我不喜欢我向路由发送更改动作的方式，它基本上是这样的:

在顶级组件{{person-view action="modifyPersonInternals"}}中，我的包装器组件如下:

{{editable-property property="firstName" action="updateFirstName"}}
{{editable-property property="lastName" action="updateLastName"}}
{{editable-property property="city" action="updateCity"}}

当用户编辑firstName时，TextField组件使用参数(新值)调用editable-property包装器组件上的updateFirstName;包装器组件反过来用两个参数(要修改的属性和新值)在路由上调用modifyPersonInternals。这是有效的，但似乎笨拙/陈旧，不可能是正确的方法，不是吗?

此外，这是我在editable-property.js中实现占位符的不成功尝试，

hasEmptyProperty: Ember.computed(function() {
    return ((this.get('property') === "") || (this.get('property') === null));
})


{{#if hasEmptyProperty}}
<div class="placeholder" {{action "editProperty"}}>{{placeholder}}</div>
{{else}}
<div {{action "editProperty"}}>{{bufferedProperty}}</div>
{{/if}}

我得到一个错误，hasEmptyProperty没有定义。

如果您将模型传递给组件，为什么不直接将models属性与您的输入关联起来呢?

{{input value=model.firstName}}

这将达到您的目标，但如果您试图不将模型传递给组件，那么最好的方法是在您正在做的时候发送一个操作。

关于hasEmptyProperty，我将有一个名为hasEmptyProperty的属性和一个设置它的函数，类似于…

checkEmptyProperty: function() {
  var property = this.get('property');
  if(property === "" || property === null ) {
    this.set('hasEmptyProperty', true);
  } else {
    this.set('hasEmptyProperty', false);
}.observes('property'),
相关文章：