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