Я создаю форму счета в 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>
Например: Когда я нажимаю кнопку - добавляю следующий ввод value1, value2, valueX. Но не знаю как.
'click #nextProduct'(event) {
//push new input to form
}
@AlonEitan, лучше? Моя проблема: не знаю, как мне решить мою проблему в meteorJS. Вот почему я не вставил образец кода.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


У вас должна быть динамическая переменная, в которой перечислены все доступные входы. Вот небольшая демонстрация того, как это можно сделать:
Во-первых: добавьте цикл #each в свой html, чтобы повторять блок ввода столько раз, сколько необходимо.
<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"})
});
Прочтите Как спросить и создайте минимальный воспроизводимый пример