Question

我在meteorJS中创建发票表单。我的问题是如何动态地向我的表单添加下一个位置。在JS（jQuery）中，它只是在点击后附加新的输入。但在Meteor中，我无法将新字段推送到模板。谁知道怎么做？

模板：

requestMatchers

例如：当我点击按钮时 - 添加下一个输入值1，value2，valueX。但不知道如何。

<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>

Answer 1

您应该有一个动态变量，列出所有可用的输入。以下是如何做到这一点的快速演示：

首先：在你的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>

第二：在你的javascript中，处理一个ReactiveVar并使用它（即添加一个新的输入）：

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"})
});

流星动态形式

1 个答案: