javascript - Ember 不会根据另一个属性更新 <input text> 的值

Question

嗨，我有一个简单的代码，可以更新组件的属性值，例如单击按钮，根据该值我需要更新 value输入文本，如下所示:

模板:
{{input value=myValue type="text" }}
<button {{action "update"}}>update</button>

组件.js:
myValue: Ember.computed("product", function(){
if(this.get("product")) {
return this.get("product");
}
}),
actions:
update(){ this.set('product', 'new value')}

但是，尽管“产品”属性已更新，但输入值保持不变， computed函数未触发。

<input>单击按钮后，应该是:

我错过了什么吗？

Answer 1

{{input}}模板助手进行双向绑定(bind)。如今，出于充分的理由，这被认为是一种不好的做法。您面临以下问题之一。

如果输入值发生变化{{input}}模板助手将新值设置为 myValue 。这会覆盖您的计算属性，因为它没有实现 setter 。之后您的输入不会绑定(bind)到 product不再了。因此改变product不会更新输入。

您有不同的方法来解决这个问题。一种选择是在 myValue 中实现 setter计算属性或简单地使用像 computed.alias 这样的宏。但我建议删除输入助手，它是双向绑定(bind)的。而是在更改时显式设置值:<input value={{myValue}} onchange={{mut "product" value="target.value"}}>