Templates Meteor：将函数绑定到模板的每个迭代中_Templates_Meteor

Templates Meteor：将函数绑定到模板的每个迭代中

templates meteor

Templates Meteor：将函数绑定到模板的每个迭代中,templates,meteor,Templates,Meteor,我是Meteor的新手，我不知道如何让函数在模板的每次迭代中独立工作。我已经编写了一个非常基本的函数，我想在单击按钮时在每个模板内显示一个弹出窗口，但是弹出窗口总是出现在第一个生成的模板上，而不是绑定到我单击的特定按钮上。我四处搜索，发现它可能与模板实例或反应变量有关，但到目前为止，我相当困惑。这可能是正确的吗我的代码： .html 我根本没有在服务器代码中写任何东西。谢谢试着像这样更改代码 <template name="test"> {{#each tasks}} <

我是Meteor的新手，我不知道如何让函数在模板的每次迭代中独立工作。我已经编写了一个非常基本的函数，我想在单击按钮时在每个模板内显示一个弹出窗口，但是弹出窗口总是出现在第一个生成的模板上，而不是绑定到我单击的特定按钮上。我四处搜索，发现它可能与模板实例或反应变量有关，但到目前为止，我相当困惑。这可能是正确的吗

我的代码：

.html

我根本没有在服务器代码中写任何东西。

谢谢

试着像这样更改代码

<template name="test">
{{#each tasks}}
<button type="button">Click Me!</button>
<div id={{_id}}>Hi</div>
{{/each}}
</template>

Template.test.events({
'click button': function(e, template) {
var id = '#'+this._id;
$(id).fadeIn();
}
});
}


{{{#每个任务}
点击我！
你好
{{/每个}}
Template.test.events({
“单击按钮”：函数（e，模板）{
变量id='#'+这个；
$（id.fadeIn（）；
}
});
}

不要使用ID，而是使用类。为什么？因为不允许多个元素具有相同的ID

创建新模板

task

，并在每个

循环中呈现它


HTML:
例如，如果您有5个任务，每个任务将获得相同的按钮idpopup
和divpops
。因此，事件无法决定单击哪个按钮。我明白了，但id不应该以某种方式绑定到模板吗？因为我仍然在调用模板中的函数。它不是template.body.events。抱歉，它不起作用。谢谢你！我以前曾设法从模板中的每个元素访问独立数据，因此问题是访问弹出窗口的唯一id，该id与当前所在的模板绑定。我猜这和范围有关。因此，我理解你打算做什么，但在我看来，应该有一个更“明显”的解决办法。
Tasks = new Mongo.Collection("tasks");

if (Meteor.isClient) {
  Template.test.helpers({
    tasks: function () {
      return Tasks.find({});
    }
  });

  Template.test.events({
    'click #popup': function(e, template) {
      template.$('#pops').fadeIn();
    }
  });
}

<template name="test">
{{#each tasks}}
<button type="button">Click Me!</button>
<div id={{_id}}>Hi</div>
{{/each}}
</template>

Template.test.events({
'click button': function(e, template) {
var id = '#'+this._id;
$(id).fadeIn();
}
});
}

<body>
  {{> test}}
</body>

<template name="test">
  {{#each tasks}}
    {{> task}}
  {{/each}}
</template>

<template name="task">
  <button type="button" class="popup">Click Me!</button>
  <div class="pops">Hi</div>
</template>

Template.task.events({
  'click .popup': function() {
    template.$('.pops').fadeIn();
  }
});