Динамическая форма метеора

Я создаю форму счета в 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
}

Прочтите Как спросить и создайте минимальный воспроизводимый пример

Alon Eitan 27.03.2018 23:38

@AlonEitan, лучше? Моя проблема: не знаю, как мне решить мою проблему в meteorJS. Вот почему я не вставил образец кода.

mr567 28.03.2018 00:11
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
2
91
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

У вас должна быть динамическая переменная, в которой перечислены все доступные входы. Вот небольшая демонстрация того, как это можно сделать:

Во-первых: добавьте цикл #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"})
});

Другие вопросы по теме