Backbone 事件未绑定到 dom 元素

Question

我的一个观点是：

events: {
    'click .tab': 'doSomething',
},

然后：

doSomething: function(){
    ...
},

这是我视图中的重复结构，但由于某种原因，此视图中的单击并未触发“doSomething”功能。

元素什么时候绑定到事件？

关于调试这个有什么技巧吗？

Answer 1

链接到小提琴：http://jsfiddle.net/7xRak/

省略选择器会导致事件绑定到视图的根元素 (

this.el

)。

如果你的

class="tab"

是视图 DOM 元素意味着

this.el

那么你应该将事件绑定为

events : {
  'click' : 'dosomething'
}

对于

this.el

中的内部元素，就像

<div class="tab">
     <span class="inner"></span>
</div>

那么你应该将事件绑定为，

  events : {
      'click' : 'dosomething'
      'click .inner' : 'onInnerClick'
    }

文档：http://backbonejs.org/#View-delegateEvents

Answer 2

委托发生在视图构造函数末尾的

delegateEvents

方法期间。

http://documentcloud.github.com/backbone/docs/backbone.html#section-144

尝试在返回

this.delegateEvents()

之前在

render

内手动调用

this

。您是否以骨干不期望的方式在

this.el

或

initialize

方法中使用

render

？

Answer 3

我认为这可能与事件冒泡有关。具体就我而言，我有一个

<details>

元素，我试图绑定到它的

toggle

事件，但主干委托事件（如方法名称所示），这意味着它将向视图的根附加一个事件处理程序元素。当事件在 DOM 树中向上冒泡直至根元素时，backbone（或 jquery）会检查事件是否源自与您提供的选择器相匹配的元素。

但是：

toggle

事件不会冒泡：https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetailsElement/toggle_event

此活动不可取消，也不会冒泡。

因此，也许在OP的情况下，处理选项卡的代码（也许是引导程序？）会在事件到达视图根元素之前取消事件冒泡。

就我而言，这段代码不工作：

this.$el.on('toggle', 'details', (evt) => {console.log('toggle event on the root element', evt);});

虽然这段代码确实有效：

this.$el.find('details').on('toggle', (evt) => {console.log('toggle event on the details element itself', evt);});