Question

我正在使用Meteor.js构建应用程序，我有一个表单，我希望能够允许用户在单击按钮时向表单添加新行（{{1} }）。我正在使用HTML模板填充表单的每一行。

每次用户点击按钮时，如何呈现模板（button.addExperience）？

请参阅下面的示例代码：

experienceRow

Answer 1

您需要使用each块以及反应变量。该变量可以是ReactiveVar，会话可变，本地集合等。这是使用ReactiveVar来保存id数组的示例实现：

<强> HTML

<body>
  {{> experienceForm }}
</body>

<template name="experienceForm">
  <form>
    {{#each experienceIds}}
      {{> experienceRow }}
    {{/each}}
  </form>
  <button class="addExperience">Add Experience</button>
</template>

<template name="experienceRow">
  <div id={{this}} class='experienceRow'>
    <input type="text" placeholder="name" value="" class="name">
    <input type="text" placeholder="address" value="" class="address">
    <input type="text" placeholder="phone" value="" class="phone">
  </div>
</template>

<强> JS

Template.experienceForm.onCreated(function() {
  this.experienceIds = new ReactiveVar(Random.id());
});

Template.experienceForm.helpers({
  experienceIds: function() {
    return Template.instance().experienceIds.get();
  }
});

Template.experienceForm.events({
  'click .addExperience': function(e, template) {
    e.preventDefault();
    var ids = template.experienceIds.get();
    ids.push(Random.id());
    template.experienceIds.set(ids);
  }
});

请注意，您需要meteor add reactive-var才能使用此功能。

Meteor：使用HTML模板添加到DOM。

1 个答案: