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> 

，然後在你的組件的.js您可以通過 const formArray = Ember.$('#my_form').serializeArray(); 獲得陣列讓他們或 const form = Ember.$('#my_form').serialize();得到一個對象

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，讓助手給每個組內更新「值」字段。

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