Question

我正在努力了解Meteor如何将事件绑定添加到模板

我有一个模板，其中有多个锚点用于导航下拉列表：

<template name="user_loggedin">
  <li  class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Select a profile..
    <b class="caret"></b></a>
    <ul class="dropdown-menu">List</ul>
  </li>

  <li  class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
      <i class="glyphicon glyphicon-cog"></i>
      <b class="caret"></b></a>
      <ul class="dropdown-menu"> </ul>
    </li>
</template>

我尝试绑定点击事件以显示下拉菜单：

Template.user_loggedin.events({
  "click a.dropdown-toggle": function(e,tml) {
  $(e.target).siblings('.dropdown-menu').toggle()
  }
})

但是，事件似乎只绑定到第一个锚点元素，而不是所有匹配'a.dropdown-toggle'选择器的事件。

包含从集合派生的动态元素的模板也会出现同样的问题。我只是假设Meteor模板事件方法的工作方式与$('a.dropdown.menu').on(...

相同

我怀疑这与Meteor在绑定事件之前没有呈现所有模板的DOM元素有关。我已经看过使用Meteor的解决方案。模板。渲染后渲染绑定事件，但考虑到Meteor在下一个版本中弃用渲染方法，这看起来很混乱。

还有其他办法吗？

Answer 1

没有。为模板指定事件处理程序，而不是“绑定”到元素。因此，如果单击任何具有类dropdown-toggle的锚元素，则肯定会执行您的事件处理程序。

您遇到的问题可能是由于在您的事件处理程序中使用e.target而不是e.currentTarget。来自Meteor文档：

<强>靶

发起事件的元素。

currentTarget

当前处理该事件的元素。   这是与事件映射中的选择器匹配的元素。对于   泡沫的事件，它可能是目标的目标或祖先，以及它   价值随着事件的发生而变化。

在第一种情况下，e.target和e.currentTarget都是a.dropdown-toggle，一切都按预期工作。但是，在第二种情况下，e.target为i.glyphicon.glyphicon-cog而e.currentTarget为a.dropdown-toggle（这是您想要的）。

因此，请尝试编辑您的事件处理程序，如下所示：

Template.user_loggedin.events({
  "click a.dropdown-toggle": function(e,tml) {
      $(e.currentTarget).siblings('.dropdown-menu').toggle()
  }
});

关于动态元素的第二个问题：你能提供一个例子吗？

Meteor事件只绑定到第一个元素

1 个答案: