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