带有动态属性的Ember TextField valueBinding

Question

我正在尝试编写一个处理我的应用程序中的自定义字段的通用视图,但我很难让它工作.这是场景 - 我有一个fieldDef定义自定义字段的对象,以及一个valueObject有数组的对象customFields,它有值.我想要做的是这样的事情:

{{view Ember.TextField valueBinding="valueObject.customFields.[fieldDef.name]"}}

显然这不起作用,因为它视为fieldDef.name文字.我已经尝试重写TextField类,但似乎无法将其绑定.

有关如何实现这一目标的任何建议？

谢谢,斯科特

Answer 1

Ember无法绑定到数组索引,因此您必须解决它.一种解决方案是将自己限制为单向绑定,其中文本字段更新值哈希值.如果您计划在用户按下按钮后提交表单,这应该可以解决问题.

在控制器中定义一个字段ID数组,并为其值输入一个哈希值.

App.ApplicationController = Ember.Controller.extend({
  fieldIds: ['name', 'email', 'whatever'],
  fieldValues: {} // {name: 'user', email: 'user@...', ...}
});

现在扩展Ember.TextField为在文本字段更改时更新值哈希.您需要传递每个实例a fieldId和values来自控制器的哈希引用.

App.TextField = Ember.TextField.extend({
  fieldId: null,
  values: null,

  valueChange: function() {
      var fieldId = this.get('fieldId');
      var values = this.get('values');
      if (values && fieldId) values[fieldId] = this.get('value');
  }.observes('value')
});

模板很简单.

{{#each fieldId in fieldIds}}
  <label>{{fieldId}}</label>
  {{view App.TextField fieldIdBinding="fieldId" valuesBinding="fieldValues"}}
  <br/>
{{/each}}

在这里,它充满了jsfiddle.