Backbone.js - 为什么我的delegateEvents选择器不起作用？

Question

我的视图包含相同类型的嵌套视图。因此，我的delegateEvents选择器需要注意只选择顶级元素而不是子视图中的元素。

在我的视图上下文中使用的以下代码成功选择了我想要绑定的元素：

var $link = this.$('> .node > .indent > a'); // success!

使用相同选择器的delegateEvents对象根本不会挂起事件：

events: {
    'click > .node > .indent > a': 'toggleGrouped' // fail :(
}

请注意，我已经确认事件连接可以与其他更简单的选择器一起使用，因此渲染不是问题。

我做错了什么？

Answer 1

这可能与jQuery的delegate事件有关，而不喜欢> .node > .indent > a选择器。

您可以通过在视图的渲染方法中添加以下代码行来确认这一点。 （这是Backbone在delegateEvents）

中所做的事情

$(this.el).delegate('> .node > .indent > a', 'click', this.toggleGrouped);

如果它仍然不起作用，那么问题与delegate事件有关，而不是主干。

解决方法是在渲染方法中完成所有渲染后绑定到click事件。

this.$('> .node > .indent > a').click(this.toggleGrouped);

您还必须在初始化方法中绑定toggleGrouped的上下文，因为它不再自动绑定。

initialize: function() {
  _.bindAll(this, 'toggleGrouped');
}

Answer 2

找到答案。 delegateEvents使用jQuery.delegate()，由于某种原因，它不接受以子降范开头的选择器：

http://api.jquery.com/delegate/#comment-66006048

Answer 3

另一种方法，我认为可能只是从>哈希中取出子选择器events，并在事件处理程序中使用event.stopPropagation()，如下所示：

toggleGrouped: function (evt) {
  evt.stopPropagation();

  // event handling code
}

听取该事件的链中的第一个父母将获得它，然后阻止它冒泡到可能也发生事件的任何其他人。