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

我不明白你想找到一种从动态表单中获取所有价值的方法吗？

您可以尝试序列化表单。您必须在每个人之前和之后放置应答器形式

const formArray = Ember.$('#my_form').serializeArray();

然后在您的组件.js中，您可以通过执行来获取它们 const form = Ember.$('#my_form').serialize(); 得到一个数组或 $users = DB::table('user') ->select('user.Name','user.Age','user.FatherGotra','user.Profession','user.City','user.State','user.AreYouManglik','user.DOB','user.ProfilePic','user.id') ->where('ShowProfileOnMatrimony','YES') ->where('Mobile','!=',$request->Mobile) ->where('isVerified',1) ->orderBy('user.id','DESC') ->paginate(5);获取对象

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

Ember.js：绑定到动态表单输入

2 个答案: