Backbone中事件传播的奇怪问题。大多数人都会问如何阻止事件传播,但我正忙着让我的事件传播!!
这里我有两个View对象。 MainView包含Item视图并侦听单击事件以调用run():
var MainView = Backbone.View.extend({
...
events: {
"click .item": "run" // works only if no click event in Item
},
render: {
// Item View object children
},
run: function() {
//run :)
}
});
项目视图对象还会侦听自己的点击事件以切换开/关行为:
var Item = Backbone.View.extend({
...
events: {
"click" : "toggle" // MainView click event works when this is removed
},
toggle: function() {
this.model.toggle();
}
});
问题是单击Item时没有触发MainView.run(),而它有Item.toggle()的click事件。
但是,如果我删除Item.toggle()click事件,MainView.run() DOES 将触发。让我得出的结论是,事件在某种程度上被迫停止传播,超出了我的控制范围。
我该如何解决这个问题?我错过了一些明显的东西,还是这是不可避免的?
感谢您提供任何建议和答案:)。
答案 0 :(得分:0)
项目视图中的click事件似乎未绑定到特定的DOM对象。监听通用点击事件可能会覆盖Backbone,无法监听您的特定.item点击事件。尝试在项目视图点击事件中添加ID或类名,以消除任何歧义。
var Item = Backbone.View.extend({
...
events: {
"click .some-class" : "toggle" // This should fix your problem
},
...
答案 1 :(得分:0)
Jay B. Martin回答了这个问题。
问题是View调用this.model.toggle();
toggle()函数设置MainView正在侦听的一些变量,导致render()事件被触发。
当MainView调用render()时,Item视图又被删除,呈现并添加到DOM中。这会使用事件:{}。
将绑定事件丢失到DOM元素而应该使用_.bind()或_.bindAll()来永久绑定事件,而不管绑定到DOM中的元素的上下文/状态。
@ Dan0,对不起我对如何切换可能是你问题的根源感到有些困惑。我认为这是通过绑定到嵌套视图中的隐式DOM元素而创建的上下文歧义的症状。一旦调用了toggle,click事件就会丢失它最初绑定的上下文(即this.el)。解决这个问题的惯用方法是:a)传递一个显式元素,以便它可以在后续事件上重新绑定,或者b)使用_.bind或_.bindAll,以便click事件永久地绑定到itemview作为上下文变化。 - Jay B. Martin 8月10日23:46