Ember TextField valueBinding动态属性

Question

我想写一个处理自定义字段在我的应用程序的通用视图，但我很难得到这个工作。这里是场景 - 我有一个定义自定义字段的fieldDef对象，以及一个具有数组的customFields的valueObject，它有值。我正在试图做的是这样的：

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

显然是行不通的，因为它将fieldDef.name作为文字。我试过重写TextField类，但似乎无法让它绑定。

有关如何完成此任务的任何建议？

感谢， 斯科特

Answer 1

灰烬不能绑定到数组索引，所以你必须解决它。一种解决方案是将自己限制为单向绑定，其中您的文本字段更新值散列。如果你打算在用户按下一个按钮后提交表单，这应该可以做到。

定义字段ID在你的控制器的阵列和哈希他们的价值观进去。

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

现在延长Ember.TextField更新您的哈希值，当文本字段更改。您需要通过每个实例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}} 

Here it is fleshed out in a jsfiddle。

Answer 2

@ahmacleod伟大的答案男人。万一有人有兴趣它的伟大工程也扩展选择：

import Ember from 'ember'; 

export default Ember.Select.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') 
}); 

把它作为一个正常的成分（组件/动态select.js）

{{#each id in fieldIds}} 
    {{dynamic-select content=fieldIds fieldIdBinding="header"  
    valuesBinding="fields"}} 
{{/each}} 

Answer 3

可以绑定动态密钥输入值（变量）的帮助mut帮助对象。

https://guides.emberjs.com/v2.6.0/templates/input-helpers/#toc_binding-dynamic-attribute

您可以访问它像这样，

var Object = {}; 
var key = "firstName"; 

我们可以绑定在这样的输入辅助键，

{{input value=(mut (get Object key))}} 

{{Object.firstName}} // Prints the dynamic value in textbox