如何从Meteor的动态创建输入中获取价值？

Question

我创建了一个自定义表单并为动态输入添加了一些jquery，但是我无法从这些生成的输入中获取值（元素，链接，图像）。这是我的表格和代码。

的模板 这是我此模板的模板

<form id="workForm" class="workAdd">
<label>Title</label>
<input type="text" name="title" id="title" class="form-control">
<label>Live Link</label>
<input type="text" name="llink" id="llink" class="form-control">
<label>Elements Used In This Project</label>
<div class="row" id="eleContainer">
    <div class="eleRow">
        <div class="col s6 m6 l6">
            <label>Element</label>
            <input type="text" name="elements[]" id="elementsid[]" class="form-control">
        </div>
        <div class="col s6 m6 l6">
            <label>Link</label>
            <input type="text" name="elinks[]" id="elinksid[]" class="form-control" >
        </div>
    </div>
</div><!--row-->
<div class="row">
    <div class="col s6 m12 center">
        <a class="btn-floating waves-effect waves-light" id="addElements"><i class="fa fa-plus"></i></a>
    </div>
</div>
<div class="row" id="imgContainer">
    <div class="imgRow">
        <label>Image</label>
        <input type="text" name="image[]" id="imageid[]" class="form-control" >
    </div>
</div>
<div class="row">
    <div class="col s6 m12 center">
        <a class="btn-floating waves-effect waves-light" id="addImages"><i class="fa fa-plus"></i></a>
    </div>
</div>
<label>Detail</label>
<textarea id="detail" class="materialize-textarea" name="detail" data-length="120"></textarea>

<button type="submit" id="work-submit" thisId="" class="btn btn-primary">Submit</button>

流星 这是我为此表单创建的提交事件。

Template.addworkTemp.events({
"submit .workAdd": function(event) {

    var title = event.target.title.value;
    var llink = event.target.llink.value;
    var elements = event.target.elements.value;
    var elinks = event.target.elinks.value;
    var images = event.target.images.value;
    var detail = event.target.detail.value;
    return false;

Answer 1

有一个很好的tutorial on meteor forms可能对您有用。本教程基于你正在使用的火焰。

首先，您可以将处理程序附加到form而不是workform类。

Template.addWorkTemp.events({
  'submit form'(event) {
  ...
  }
});

然后你应该阻止默认的表单操作：

Template.addWorkTemp.events({
  'submit form'(event) {
    event.preventDefault();
    ...
  }
});

event对象具有target属性，该属性根据html中附加到它们的名称为每个字段提供属性。

Template.addWorkTemp.events({
  'submit form'(event) {
    event.preventDefault();
    console.log(event.target.llink.value);
    ...
  }
});

我不知道您为什么要将[]附加到字段名称。我不确定那些在那种情况下是否有效。

有一个related answer，它显示了如何通过template对象访问表单元素，该对象是事件处理程序的可选第二个参数。这也可能对你有帮助。

当我调试这样的事情时，我通常会在事件处理程序的第一行设置断点（使用浏览器的开发工具），然后检查事件以确保我理解其中的内容。