forms - 是否可以使用 Handlebars 和 Meteor 实现动态表单输入行（通过单击添加添加新行）？

Question

我正在使用 Meteor，我想移植这个 AngularJS 应用程序（http://simplydo.com/projector/）作为练习。

我在使用 Handlebars 将动态输入表单行添加到部分时遇到困难，如果可能的话，我在任何地方都找不到任何文档。这是使用ng-repeat在 Angular 中的一个小技巧，但我想确认这在 Handlebars 中是否可行，或者我是否需要使用 Jquery 来实现这一点。

提前致谢。

Answer 1

在 Meteor 中同样简单

您所要做的就是重复这些行{{#each rowData}}并使用一个按钮将文档添加到集合中。这是一个例子：

在此模板中，显示了页面的行。为了添加一行，用户必须单击添加图像。模板是：

<template name="page">
   {{#with page}}
   <h3>{{title}}</h3>

   {{#each rows}}
   <div class="row-fluid page-row {{#if isSelected this}}selected-row{{/if}}">
         ... page content here
   </div>
   {{/each}}
   {{/with}}

   <div class="btn-toolbar">
      <div class="pull-right">
         <a id="add-row" href="#" data-toggle="tooltip" title="{{lbl 'add-page'}}">
            <img src="/images/add.png" class="asset-icon"/>
         </a>

         <img src="/images/separator.png" class="asset-icon"/>

         <a id="delete-row" href="#" data-toggle="tooltip" title="{{lbl 'delete-page'}}">
            <img src="/images/delete.png" class="asset-icon"/>
         </a>
      </div>
   </div>
</template>

该模板的助手是：

Template.page.page = function () {
   return Session.get("selected-page");
}

为了添加页面，click实现了添加按钮的事件：

   "click #add-row": function (evt, template) {
      var page = Session.get("selected-page");
      Pages.update({_id: page._id}, ... add a new row here ...)
   }

因为整个事情是反应性的，行列表将update在Pages集合之后重绘。