Javascript 流星动力学形式

Javascript 流星动力学形式,javascript,forms,meteor,Javascript,Forms,Meteor,我正在用meteorJS创建发票表单。我的问题是如何在表单中动态添加下一个位置。在JS(jQuery)中,它只是在单击后添加新的输入。但在Meteor中,我无法将新字段推送到模板。有人知道怎么做吗 模板: <template name="invForm"> <form class="newComponent"> <input type="text" class="form-control" name="name" autocomplete="of

我正在用meteorJS创建发票表单。我的问题是如何在表单中动态添加下一个位置。在JS(jQuery)中,它只是在单击后添加新的输入。但在Meteor中,我无法将新字段推送到模板。有人知道怎么做吗

模板:

<template name="invForm">
    <form class="newComponent">
      <input type="text" class="form-control" name="name" autocomplete="off" placeholder="Name" />
      <select name="type" class="select2-simple">
        <option value="comp1">Comp1</option>
        <option value="comp2">Comp2</option>
      </select>
      <input type="text" class="form-control " name="value0" autocomplete="off" placeholder="Value"/>
      <button type="submit" id="create-new">
        <i class="fa fa-plus"></i>
      </button>
    </form>
   <button id="addNewValue">Add new value</button>
</template>

您应该有一个列出所有可用输入的动态变量。 下面是一个快速演示,演示了如何执行此操作:

首先:在html中添加一个#each循环,根据需要重复输入块多次

<template name="invForm">
    <form class="newComponent">
        <input type="text" class="form-control" name="name" autocomplete="off" placeholder="Name" />
        <select name="type" class="select2-simple">
            <option value="comp1">Comp1</option>
            <option value="comp2">Comp2</option>
        </select>
        {{#each input in inputs}}
            <input type="text" class="form-control " name="{{input.value}}" autocomplete="off" placeholder="Value"/>
        {{/each}}
        <button type="submit" id="create-new">
            <i class="fa fa-plus"></i>
        </button>
    </form>
    <button id="addNewValue">Add new value</button>
</template>

阅读并创建一个@AlonEitan,更好吗?我的问题是:不知道我该如何解决我在meteorJS中的问题。这就是为什么我没有粘贴代码示例的原因。
<template name="invForm">
    <form class="newComponent">
        <input type="text" class="form-control" name="name" autocomplete="off" placeholder="Name" />
        <select name="type" class="select2-simple">
            <option value="comp1">Comp1</option>
            <option value="comp2">Comp2</option>
        </select>
        {{#each input in inputs}}
            <input type="text" class="form-control " name="{{input.value}}" autocomplete="off" placeholder="Value"/>
        {{/each}}
        <button type="submit" id="create-new">
            <i class="fa fa-plus"></i>
        </button>
    </form>
    <button id="addNewValue">Add new value</button>
</template>
Template.invForm.events({
    //Events : type "ev" + tab to create a new event
    'click #addNewValue': function (event, template) {
        var inputs = template.inputs.get();
        inputs.push({value:"newValue"});
        template.inputs.set(inputs);
    },
});

Template.invForm.helpers({
    //helpers : type "hp" + tab to create a new helper
    inputs: function () {
        return Template.instance().inputs.get();
    },
});

Template.invForm.onCreated(function () {
    var self = Template.instance();
    self.inputs = new ReactiveVar({value:"initialValue"})
});