Ember不会根据其他属性更新<input text =“” />的值

Question

您好，我有一个简单的代码来更新组件的属性值，例如单击按钮，然后基于该值，我需要更新输入文本的value，如下所示：

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

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

但是，尽管“ product”属性已更新，但输入值保持不变， computed功能未触发。

点击按钮后的

<input>应该是：

我错过了什么吗？

Answer 1

{{input}}模板助手进行双向绑定。有充分的理由，这被认为是最近的不良做法。您面临着其中一个问题。

如果输入值发生更改，{{input}}模板助手将在myValue上设置新值。这将覆盖您的计算属性，因为该属性未实现setter。之后，您的输入不再绑定到product。因此，更改product不会更新输入。

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

Answer 2

如果您只想在按下按钮时更新值，建议您对按钮进行操作。

template.hbs

application(_:didReceiveRemoteNotification:fetchCompletionHandler:)

component.js

userNotificationCenter(_:didReceive:withCompletionHandler:)

https://guides.emberjs.com/release/templates/actions/#toc_action-parameters

让我知道我是否在这里误会了你。

Answer 3

所以，  我需要的是2向数据绑定，因为我从：
更新了myValue 1.输入文字
2.来自“产品”

我的计算方法需要稍微重构，以添加getter和setter，就像这样：

myValue: Ember.computed("product", function(){ get(key){ return this.get("product"); }, set(key, value){ this.set(product', value); return value; }),