Ember TextField valueBinding with dynamicプロパティ

Question

私は、アプリケーションのカスタムフィールドを扱う一般的なビューを作成しようとしていますが、これを動作させるのは苦労しています。ここにシナリオがあります - カスタムフィールドを定義するfieldDefオブジェクトと値を持つcustomFieldsという配列を持つvalueObjectオブジェクトがあります。それはリテラルとしてfieldDef.name扱いますので、明らかにそれが動作しません

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

：私は何をしようとしていることは、このようなものです。私はTextFieldクラスをオーバーライドしようとしましたが、バインドすることはできません。

これを達成するための提案はありますか？

おかげで、 スコット

Answer 1

あなたはそれを回避する必要がありますので、エンバーは、配列のインデックスにバインドすることはできません。 1つの解決策は、あなたのテキストフィールドが値ハッシュを更新する一方向バインディングに制限することです。ユーザーがボタンを押した後にフォームを提出する予定の場合は、この操作を行う必要があります。

は、コントローラとその値がに行くためのハッシュのフィールドIDの配列を定義します。

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

今ときにテキストフィールドが変更自分の価値観のハッシュを更新するEmber.TextFieldを拡張します。各インスタンスにはfieldIdとコントローラからのvaluesハッシュへの参照を渡す必要があります。

テンプレートは単純です。

{{#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