Question

我正在尝试使用meteor-autoform包生成看起来像这样的选项：

<div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" class="px"> <span class="lbl"><strong>amazon.co.jp</strong></span><br> <span class="lbl">Ordered qty 1 on Oct 13, 2014 (4 days ago)</span><br> </label> </div>

但似乎我对html格式没有太多控制权。我唯一的选择是创建自己的自定义自动模板吗？我无法理解如何做到这一点。

我看过示例模板，但我很难理解。在bootstrap3-horizontal模板中，我没有看到任何对'option'或'radio'的引用。因此，在确定如何为选项创建自定义模板方面没有多大帮助。

非常感谢任何提示或示例！

修改我们在模板中使用此选项生成选项：

 {{> afQuickField name='purchaseItemId' options=purchaseSelectOptions noselect=true template="bootstrap3-horizontal" label-class="col-sm-2" input-col-class="col-sm-10" class="form-control"}}

和js中的函数

purchaseSelectOptions: function() {
return _.chain(this.potentialPurchaseItems)
  .filter(function(potentialPurchaseItem) {
    return potentialPurchaseItem.totalQuantityReceived < potentialPurchaseItem.quantityPurchased;
  })
  .map(function(purchaseItem) {
    var vendor = Vendors.findOne({_id: purchaseItem.vendorId});
    var vendorName = vendor ? vendor.vendorName : 'loading...';
    return {
      label: vendorName + ' - waiting to receive ' + (purchaseItem.quantityPurchased - purchaseItem.totalQuantityReceived) + '. (Qty ' + purchaseItem.quantityPurchased + ' ordered ' + moment(purchaseItem.purchasedAt).format("MMM-DD-YYYY") +')',
      value: purchaseItem._id,
    };
  })
  .value();
},

所以这不仅仅是单独设计元素的问题。我正在试图弄清楚如何修改autoform模板或其他东西，以便我对结构和类有更多的控制。

Answer 1

在另一个论坛上得到了帮助。这里的协议是什么？只是链接到它或粘贴它？

假设autoform 4.0 +

在afQuickField上，添加属性afFieldInput-template="optionExtras"。

然后定义覆盖主题模板。模板名称应为输入类型模板+“_”+您的主题模板名称。在您的情况下，您希望覆盖“select-radio”类型模板，如您在此处所见，该模板名为afRadioGroup。因此，完整的模板名称应为“afRadioGroup_optionExtras”。

<template name="afRadioGroup_optionExtras">
  // your template
</template>

我建议复制bootstrap主题模板及其所有模板助手。然后你可以添加你的额外内容。要传递数据，请将自定义属性添加到afQuickField，然后您可以在this.atts下的主题模板中访问它们。

如何使用meteor-autoform格式化选项（无线电）？

1 个答案: