Backbone.js 事件绑定答案

【问题标题】：Backbone.js Event BindingBackbone.js 事件绑定
【发布时间】：2011-07-13 07:32:47
【问题描述】：

我正在使用 Backbone.js，每个模型的视图都有一个分段控件类型的 UI 元素。它们每个都由一个 ul 和几个 li 元素组成。我想绑定一个事件，以便当单击这些元素之一时，我可以确定单击了哪个元素并使用适当的值更新模型。

问题在于 Backbone 绑定了事件（这些在视图的事件哈希中），因此回调函数中的“this”指的是视图，而不是 li 元素。这意味着我无法确定点击了几个 li 元素中的哪一个。如果我使用普通的 jQuery 绑定，我可以将“this”绑定到 li 元素，但是我不再跟踪模型，所以我无法更新它。

【问题讨论】：

标签： jquery events binding callback backbone.js

【解决方案1】：

在我看来，jQuery 将this 设置为当时方便的任何东西的习惯是一种非常讨厌的模式——幸运的是，你永远不必依赖它：

onClick: function(e) {
  this;                // Still the view instance (as it should be).
  e.target;            // The element that was clicked.
  e.currentTarget;     // The element that was bound by the click event.
}

...您可以根据需要使用事件对象的target 或currentTarget。

【讨论】：

如果你的作用域不干净，Internet Explorer 有一个讨厌的习惯，即把 this 解释为 window。
这只适用于 jquery 触发的事件，对吧？通过主干的 trigger() 函数触发的事件不会传递 jquery 事件，而是传递您在 trigger() 中输入的参数
@JensAlm 没错。 Backbone 的 .trigger() 函数触发 Backbone 模型上的事件，而 Backbone 视图的“事件”列表连接到 jQuery 的 delegateEvents。它们是两种不同的事件系统。

【解决方案2】：

无法弄清楚为什么我不能对上面的@jashkenas 答案发表评论。他的方法是正确的（谢谢！）但我想我会澄清情况：在您的事件处理程序中，您可以恢复事件绑定到的元素。示例主干代码如下所示：

MyView = Backbone.View.extend({
    events: {
        'click .item': 'handleClick'
    },

    handleClick: function(e) {
        this; // The view instance
        e.target; // The element that was clicked 
        e.currentTarget; // The element that was bound by the click event
    }
});

我使用它在我的所有表单字段中设置默认文本...是的，我对 HTML5 还不是很了解 :)

编辑： 顺便说一句， e.target 是原始元素。您需要使用 $(e.target) 来获取 jQuery 访问权限。

【讨论】：

如果你正在使用主干，这是要走的路。
仍然看起来很蹩脚，你必须知道必须知道所点击内容的 CSS 类。像'click this.$el': 'handleClick' 这样的东西会更好。
这不是蹩脚的，因为您可能为对象视图中包含的元素分配了不同的行为（例如，一个用于编辑的链接，另一个用于删除的链接，放置在您的项目标题旁边，此标题领先单击时进入显示视图）。还是我想错了？