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

Question

我正在接触 Meteor，我想移植这个 AngularJS 应用程序 ( http://simplydo.com/projector/ ) 作为练习。

我在使用 Handlebars 实现将动态输入表单行添加到部分时遇到困难，并且我在任何地方都没有找到任何文档来记录这种情况。在 Angular 中使用 ng-repeat 很简单，但我想确认这在 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 ...)
   }

因为整个过程是 react 性的，所以在 Pages 集合上进行更新后，行列表将重新绘制。