2013-03-01 76 views
6

我想寫一個處理自定義字段在我的應用程序的通用視圖,但我很難得到這個工作。這裏是場景 - 我有一個定義自定義字段的fieldDef對象,以及一個具有數組的customFieldsvalueObject,它有值。我正在試圖做的是這樣的:Ember TextField valueBinding動態屬性

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

顯然是行不通的,因爲它將fieldDef.name作爲文字。我試過重寫TextField類,但似乎無法讓它綁定。

有關如何完成此任務的任何建議?

感謝, 斯科特

回答

6

灰燼不能綁定到數組索引,所以你必須解決它。一種解決方案是將自己限制爲單向綁定,其中您的文本字段更新值散列。如果你打算在用戶按下一個按鈕後提交表單,這應該可以做到。

定義字段ID在你的控制器的陣列和哈希他們的價值觀進去。

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

現在延長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

+1

感謝 - 我用的方法與此非常相似。 – 2013-03-05 17:03:32

+0

我是否需要在控制器中聲明App.TextField = Ember.TextField.extend({}),如果我只想要一個帶有valueBinding的普通文本字段? – 2014-02-19 15:15:07

1

@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}}