meteor - 在 MeteorJS 中动态添加表单字段

Question

所以我正在构建一个测验应用程序，人们可以在其中创建测验，并且我想更好地了解 meteor 如何处理动态表单。测验将类似于“你是哪个星球大战角色？”

然后，用户将填写“描述性名词”，例如 Chewbacca、R2D2 等，以创建测验。不过，我希望用户能够通过单击添加按钮来添加更多选择来选择多少个描述性名词。我可能知道如何更改 HTML 方面的名称属性，例如“descriptive-noun2”、“descriptive-noun3”，但我不知道如何为提交事件执行此操作。这些也将有一个与之相关的图像。有没有办法可以将其作为数组提交，或者我怎样才能动态地将它们提交到数据库？谢谢!

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将有一个对象数组，其中包含每个元素的名称和值。然后您可以将它们插入数据库。