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

我正在尝试创建几个输入来立即更新我的余烬数据模型，而无需提交操作。例如

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

我通过围绕一个Ember TextField子类组件创建一个包装器组件来实现这一点，并使其正常工作，但存在两个主要问题：

占位符不起作用，因为我试图实现它们（见下文）——似乎我可以使用TextSupport mixin更容易地实现这一点，但我不知道如何使用它

我不喜欢我向路线发送更改操作的方式，基本上是这样的：

在顶级组件

{{person view action=“modifyPersonInternals”}

中，我的包装器组件如下所示：

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

当用户编辑

firstName

时，TextField组件使用参数（新值）调用

可编辑属性

包装组件上的

updateFirstName

；包装器组件依次使用两个参数（要修改的属性和新值）调用路由上的

modifyPersonInternals

。这是可行的，但似乎笨重/笨拙，不可能是正确的方法，不是吗

另外，这里是我在

editable property.js

中实现占位符的失败尝试

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

在editable-property.hbs中：

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

{{{#if hasEmptyProperty}
{{占位符}}
{{else}
{{bufferedProperty}}
{{/if}

---

我得到一个错误，未定义

hasEmptyProperty

。

如果仍要将模型传递到组件中，为什么不直接将模型属性与输入关联起来

{{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'),

---

我可能遗漏了一些东西，但是为什么

{{{input value=model.firstName placeholder=“Enter first name”}}

不起作用呢？如果你要这样做，那么我认为

hasEmptyProperty

需要

返回this.get（'model'）。get（this.get（'property'）===“”| | this.get（'model'）。get（this.get（'property'））==null。这几乎可以工作-如果属性更改，hasEmptyProperty将正确更新。但它最初不会求值，每个属性都默认为false，即使该属性实际上为空。如果我使用
.on（'didInsertElement'），则有效。观察（'property'）
I分别初始化所有内容。因此通常会有：setup:function（）{}