Ember.js：動的フォーム入力へのバインド

Question

私は、製品上の "可変"パーソナライズされたデータを収集する適切な方法を見つけようとしています。生成物は、これらのパーソナライズされたフィールドが定義されている：その個人化データは、各量のために異なることができる以外

"personalization": [ 
    { 
    "id": 234, 
    "maxlength": "128", 
    "prompt": "Text Line 1 (12 character limit)", 
    "required": "1" 
    }, 
    { 
    "id": 235, 
    "maxlength": "128", 
    "prompt": "Text Line 2 (12 character limit)", 
    "required": "1" 
    } 
], 

は、非常に簡単になること入力を収集する小さなフォームを構築します。私はこの項目の2を注文するのであれば、それは、パーソナライゼーションを持つことができます。

FIRST ITEM 
Text Line 1: Yarr 
Text line 2: Matey 

SECOND ITEM 
Text Line 1: Swab 
Text line 2: The poop deck 

だから、基本的にパーソナライズされたフィールドのセットは、各数量のために繰り返す必要があります。このテンプレートを使用して

personalizedForm: computed('quantity', function() { 
    let q = get(this, 'quantity'); 
    let persform = []; 
    for (let i = 0; i < q; i++) { 
     persForm.push(get(this, 'model.personalization')); 
    } 
    return persForm; 
}), 

：

私は計算されたプロパティを使用して構築された形持っ

{{#each personalizedForm as |quantity index|}} 
    Item {{add index 1}} 
    <ul> 
     {{#each quantity as |set|}} 
      <li class="label">{{set.prompt}}</li> 
      <li class="field">{{input value=????}}</li> 
     {{/each}} 
    </ul> 
{{/each}} 

をそして、それは下の画像のような形を示しています。それは素晴らしいです。しかし、私はちょうどそれぞれのフォームフィールドにバインドするものを正確に把握することができません、どのように。私は、 "mut"と "get"ヘルパーがチケットだと思っていますが、私はデータを保存するオブジェクトを設定する方法も知らない。

ご協力いただきましてありがとうございます。

Answer 1

私はあなたがダイナミックなフォームからすべての値を取得する方法を見つけたい理解してSURていませんよ？

フォームをシリアル化することができます。 あなたがそう

<form id="my_form"> 
{{#each personalizedForm as |quantity|}} 
    Item {{add index 1}} 
    <ul> 
    {{#each quantity as |set|}} 
     <li class="label">{{set.prompt}}</li> 
     <li class="field">{{input value=????}}</li> 
    {{/each}} 
    </ul> 
{{/each}} 
<form> 

などの各して、あなたのコンポーネントには、オブジェクト

を取得するための配列または const form = Ember.$('#my_form').serialize();を取得するために const formArray = Ember.$('#my_form').serializeArray(); を行うことによって、それらを得ることができるの.js前と後の地上子のフォームを配置する必要があります

Answer 2

私はこれを幾分考え出したと思います。

persModel: [], // will contain dynamic model 

persModelUpdated: computed('quantity', function() { 

    let persModel = this.get('persModel'); 
    let persPrompts = get(this, 'model.personalization'); 

    // loop thru quantities 
    for (let i = 0; i < get(this, 'quantity'); i++) { 
     // if persModel does not have this set of prompts, push in a copy 
     if (!persModel.objectAt(i)) { 
      let copySet = Ember.copy(persPrompts, { 'deep': true }); 
      persModel.pushObject(copySet); 
     } 
    } 

    return persModel; 
}) 

フィールドが計算されたプロパティに基づいて動的に書き出されたテンプレートで：コントローラのプロパティと量が変化したときに/場合は、それを更新し、計算プロパティがあります。私は、mutを使用していて、各セット内の 'value'フィールドを更新するためにヘルパーを取得しています。代わりの

{{#each persModelUpdated as |thisQty index|}} 
    Item {{add index 1}} 
    <ul> 
     {{#each thisQty as |persSet|}} 
     <li>{{persSet.prompt}}</li> 
     <li>{{input value=(mut (get persSet 'value'))}}</li> 
     {{/each}} 
    </ul> 
{{/each}}