Динамически добавлять поля формы в MeteorJS

Question

Итак, я создаю приложение для викторины, где люди могут создавать викторины, и я хотел бы лучше понять, как метеор может обрабатывать динамические формы. Викторина будет чем-то вроде «Какой персонаж« Звездных войн »?

Затем пользователь заполнит «описательные существительные», такие как Chewbacca, R2D2 и т. Д., Чтобы создать викторину. Однако я бы хотел, чтобы пользователь мог выбрать, сколько описательных существительных, нажав кнопку добавления, чтобы добавить больше вариантов. Я мог бы, вероятно, выяснить, как изменить атрибут имени, например «descriptive-noun2», «descriptive-noun3» на HTML-стороне вещей, но я не могу понять, как это сделать для события отправки. У них также будет изображение, связанное с ними. Есть ли способ, которым я могу представить это как массив, или как еще я могу динамически отправлять их в базу данных? Спасибо!

HTML:

<div class="control-group noun">    
     <label class="control-label" for="descriptive-noun"></label> 
     <div class="controls"> 
      <input name="descriptive-noun" type="text" value=""/> 
     </div> 
    </div> 

    <div class="control-group noun">    
     <label class="control-label" for="descriptive-noun"></label> 
     <div class="controls"> 
      <input name="descriptive-noun" type="text" value=""/> 
     </div> 
    </div> 

JavaScript:

Template.quizSubmit.events({ 
'submit form': function(e) { 
    e.preventDefault(); 

    var quiz = {  
     title: $(e.target).find('[name=title]').val(), 
     descriptive_noun1: $(e.target).find('[name=descriptive-noun').val(), 
     descriptive_noun2: $(e.target).find('[name=descriptive-noun').val() 
    } 

    quiz._id = Quizzes.insert(quiz); 
    Router.go('quizItemDetails', quiz); 
    } 

}); 

Answer 1

Я думаю, что это на самом деле вопрос о HTML-форм.

Во-первых, ваш HTML должен содержать элемент <form>. Эта форма будет содержать поля <input>, которые вы создаете. Как вы можете предположить, вы можете добавлять новые элементы <input> к динамически.

<form id='form'> 
    <input name="descriptive-noun1" type="text" value=""/> 
    <input name="descriptive-noun2" type="text" value=""/> 
    <input name="descriptive-noun3" type="text" value=""/> 
    <button id="submit" type="submit">Submit</button> 
</form> 

Затем на стороне JavaScript, вы получите данные внутри как этот

Template.quizSubmit.events({ 
    'submit' : function(event) { 
    var formData = $('#form').serializeArray() 
    event.preventDefault(); 
    } 
}); 

Переменная formData будет иметь массив объектов, содержащих имя и значение каждого элемента. Затем вы можете вставить их в базу данных.