ember.js - 如何设置输入字段的值并在提交到 Ember.js 操作时更新它？

Question

在 Handlebars 模板上，我想用值预先填充输入字段。我可以通过放置 value=object.property 来做到这一点。然后用户应该更新该值，当他们单击激活操作的按钮时，该值应该提交给组件。

问题是没有提交任何值，不是预先填充的值，也不是新值。当我 console.log 提交给组件的内容时，文本字段的输入为“未定义”，数字字段的输入为“NaN”。

这是我的 Handlebars 模板:

{{input type="text" value=object.name valueBinding='newName'}}
{{view App.NumberField min='1' value=object.count valueBinding='newCount'}} 
<button {{action updateObjectDetails object}}>Save</button>

它提交到的相关组件:

App.ObjectsDetailsComponent = Ember.Component.extend({
  actions: {
    updateObjectDetails: function(object){
      object.set("name", this.get('newName'))
      object.set("party_size", parseInt(this.get('newCount')))
      object.save();
    }
  }
});

有没有办法用正确的值填充输入字段并让它随操作一起提交？

Answer 1

啊，明白了。问题是不要像创建新对象时那样尝试使用 valueBindings，而是使用实际值，因为实际值正在发生变化。所以在组件中，是object.get('name')，而不是this.get('newName')。

因此 Handlebars 应该是这样的:

{{input type="text" value=object.name}}
{{view App.NumberField min='1' value=object.count}} 
<button {{action updateObjectDetails object}}>Save</button>

组件如下:

App.ObjectsDetailsComponent = Ember.Component.extend({
  actions: {
    updateObjectDetails: function(object){
      object.set("name", object.get('name'))
      object.set("party_size", parseInt(object.get('count')))
      object.save();
    }
  }
});