Javascript 流星动力学形式
我正在用meteorJS创建发票表单。我的问题是如何在表单中动态添加下一个位置。在JS(jQuery)中,它只是在单击后添加新的输入。但在Meteor中,我无法将新字段推送到模板。有人知道怎么做吗 模板: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
<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"})
});