meteor - 如何使用 autoform 用#each 填充选择元素？

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>

在 autoform 中，我如何翻译这部分？

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

Answer 1

创建一个模板帮助函数，通过映射您的设备数组并添加额外的选项来为您的选择菜单返回选项数组，以便为​​ autoform 获取正确的架构，如下所示：

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