流星处理具有相同名称的多个输入

Question

如何在流星中处理多个具有相同名称的输入值并期望来自事件的数组。

<input type="text" class="form-control valid" id="companyEmail" name="companyEmail[]">

Answer 1

到目前为止，在 Blaze 模板中确定事件范围的最简单方法是在您需要捕获事件的级别定义模板。

如果你有：

 <template name="companyEmails">
 {{#each companyEmail}}
   <input type="text" class="form-control valid" id="companyEmail" name="companyEmail[]">
 {{/each}}
 </template>

然后，如果您将事件处理程序附加到 companyEmails 模板，您必须确定哪个 input 已更改。

如果您将此模式更改为：

 <template name="companyEmails">
 {{#each companyEmail}}
   {{> oneCompanyEmail}}
 {{/each}}
 </template>

 <template name="oneCompanyEmail">
 <input type="text" class="form-control valid" id="companyEmail" name="companyEmail[]">
 </template>

然后您可以将事件处理程序附加到较低级别的模板，并保证您在具有适当数据上下文的正确对象上获得正确事件：

 Template.oneCompanyEmail.events({
   'input #companyEmail': function(ev,err){
     var emailAddress = ev.target.value;
     console.log(this); // will be the value of companyEmail from the #each
   }
 });

Answer 2

与 Meteor 中的往常一样，您可能在模板范围内工作并动态创建这些输入。

如果是这种情况，您需要为输入创建一个事件处理程序，然后使用“this”捕获并发使用的输入，这是一个示例：

html 文件：

<template name="emailForm">
  {{#each item in items}}
    <input name="email" class="email" placeholder="enter email address">
    <button class="addEmail">+</button>
  {{/each}}
</template>

在你的 js 文件中：

if(Meteor.isClient) {
  Template.emailForm.events({
    'click .addEmail': function(event) {
      console.log(this);
    }
  });
}

查看“this”的结果，并了解如何提取所需的数据位，因为它仅代表单击的项目。