Question

所以我正在创建一个简单的民意调查应用。我有一个包含3个字段的表单，对于民意调查问题有3个答案。我想要做的是创建一个按钮，以便我可以在需要时动态创建更多字段。

但我对如何做到这一点很困惑

<template name="pollForm">
  <form class="new-poll">
      <div class="form-group">
          <label>Question</label>
          <input type="text" name="question" placeholder="Your Question">
      </div>

      <div class="form-group">
          <label>Choice #1</label>
          <input type="text" name="choice1" placeholder="Choice #1">
      </div>
      <div class="form-group">
          <label>Choice #2</label>
          <input type="text" name="choice2" placeholder="Choice #2">
      </div>
      <div class="form-group">
          <label>Choice #3</label>
          <input type="text" name="choice3" placeholder="Choice #3">
      </div>
  </form>
</template>

如何修改模板的HTML以便添加更多字段？

Answer 1

您可以注册click事件并使用JavaScript或jQuery追加新的HTML元素：

 $('<div>').attr('class', 'form-group').insertBefore('#add-choice');
 $('<label>').text('Choice #1').appendTo('form div.form-group:last');
 $('<input>').attr('type', 'text').attr('name', 'choice1').attr('placeholder', 'Choice 1').appendTo('form div.form-group:last');

另一种方法是使用本地（客户端）Meteor集合并在单击按钮时插入文档：

Choices = new Mongo.Collection(null);

if (Meteor.isClient) {
    Template.pollForm.events({
        'click #add-choice': function () {
            Choices.insert({'label': 'Choice #123', 'placeholder': 'Choice #123', 'name': "choice123"});
        }
    });
    Template.pollForm.helpers({
        choices: () => Choices.find()
    });
    Template.pollForm.onRendered(function () {
        Choices.insert({'label': 'Choice #1', 'placeholder': 'Choice #1', 'name': "choice1"});
        Choices.insert({'label': 'Choice #2', 'placeholder': 'Choice #2', 'name': "choice2"});
        Choices.insert({'label': 'Choice #3', 'placeholder': 'Choice #3', 'name': "choice3"});
    });
}

<template name="pollForm">
    <form class="new-poll">
        <div class="form-group">
            <label>Question</label>
            <input type="text" name="question" placeholder="Your Question">
        </div>
        {{#each choices}}
            <div class="form-group">
                <label>{{label}}</label>
                <input type="text" name="{{name}}" placeholder="{{placeholder}}">
            </div>
        {{/each}}
        <button type="button" id="add-choice">Add choice</button>
    </form>
</template>

如何在按下按钮时修改Meteor模板？

1 个答案: