如何使用autoform使用#each填充select元素？

Question

这是我想要转换为使用autoform的表单的一部分。

<div class="col-lg-4 col-md-4 col-sm-4"> 
<label for="pay_with" id="pay_with_label">Pay With</label> 
<select name="pay_with" id="pay_with" class="form-control select select-primary mbl" required data-placeholder="Select an Option"> 
    <option value="Card">New Card</option> 
    <option value="Check">New Bank</option> 
    {{#each device}} 
     <option value="{{card_id}}" selected {{selected}}>{{brand}} - {{last4}}</option> 
    {{/each}} 
</select> 

在自动窗体，我怎么翻译这个部分？

{{#each device}} 
    <option value="{{card_id}}" selected {{selected}}>{{brand}} - {{last4}}</option> 
{{/each}} 

Answer 1

创建一个返回的选项排列您的选择菜单，通过映射你的设备阵列，为了得到自动窗体正确的架构，像这样增加的额外的选项模板辅助函数：

Template.myForm.helpers({ 
    deviceOptions: function() { 

     var deviceOpts = devices.map(function(device) { 
     return { label: device.brand+' - '+device.last4, value: device.card_id } 
     }); 

     deviceOpts.unshift({ label: 'New bank', value: 'Check' }); 
     deviceOpts.unshift({ label: 'New card', value: 'Card' }); 

     return deviceOpts; 
    }, 
}); 

然后，你可以调用助手在你的模板指令：

{{> afFieldInput name="payWith" type="select" options=deviceOptions }}