存在多个模板实例时如何处理模板事件？答案

【问题标题】：How Do I Handle Template Events When Multiple Template Instances Exist?存在多个模板实例时如何处理模板事件？
【发布时间】：2015-08-13 10:31:22
【问题描述】：

我在 2 个地方包含相同的模板，但参数不同：

{{> newPost isReply=true replyTo=this}}

当我在辅助方法中放置断点时，我看到 this.isReply 变量确实设置为 true，事件函数中的悬停是 false。我认为原因是有几个包含相同的模板，另一个是这个标志设置为 false 并且选择器也适合该模板并且它被调用所以我得到模板之间的数据上下文不一致。这是选择器示例：

'click #savePost' : function() {
      if (this.isReply) {
      ....

我的问题是也许有人可以解释流星在这种情况下究竟是如何工作的，应该如何处理这种情况？现在我认为解决方案对于每个模板来说都是唯一的#savePost，但是如果我前进的方式甚至是流星的一个好习惯，我很感兴趣？此外，您了解 newPost 模板包含按钮#savePost，我应该如何使其独一无二？我做不到：

'click #savePost' + someId : function() {

【问题讨论】：

this 在事件处理程序中不一定指用于呈现模板的数据上下文。只要您不更改封闭环境中的变量，使用多个模板实例应该没有问题。你不能简单地使用类而不是 ids 吗？
我明白了。我想要做的是一个新的发布功能，我有一个带有按钮和弹出窗口的模板来发布。现在有一个新帖子模板，每个现有帖子都有一个带有replyTo = true，postId = id参数的模板。不知道实现这样的功能是否是最佳实践。如果它有助于我的目标，我可以使用类或任何东西:)
您希望父模板监听子模板中发生的事件吗？
不，但似乎发生了类似的事情。我有一个模板只是为了发布新帖子（isReply=false），然后每个现有帖子都包含发布回复的模板。当我点击回复时，我想设置和使用用户回复的帖子 ID。所以实际上我希望每个模板只听他们的事件，我可以使用他们的数据上下文，其中包含用户回复的 isReply 标志和 postId。

标签： events meteor spacebars

【解决方案1】：

我认为问题在于您尝试使用this 访问数据。正确的方法是使用Template.instance().data。示例：

'click #savePost': function( e, tmpl ) {

  if ( tmpl.data.isReply )
    //do stuff.

}

让我知道它是否有效。

【讨论】：

嗨，谢谢你的想法，但它仍然是一样的。因为事件选择器适合所有模板，我猜流星只使用第一个模板来处理它，在我的例子中，它的数据上下文中的 isReply 标志设置为 false。至少这是我对流星工作原理的怀疑，我不确定如何解决这个问题。

【解决方案2】：

首先，如果我理解正确的话，你在页面上同时有多个相同的ids（多个#savePosts），这是无效的html。相反，您应该将其设为一个类 (.savePost)。

不管怎样，你可以在多个地方使用相同的选择器，Meteor 可以区分它们。在事件函数中，您可以访问数据上下文和事件目标。

例如：

Template.newPost.events({
    'click .savePost': function (event) {
        console.log(this); // this will return the data context
        console.log(this.isReply); // this should give you a correct value
        console.log($(event.target)); // this is how to select the button that was just clicked
        console.log($(event.target).val()); // this will give you the value
    }
});

无论有多少模板对点击事件使用同一个类，这都应该有效。

【讨论】：