Question

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 将触发。让我得出的结论是，事件在某种程度上被迫停止传播，超出了我的控制范围。

我该如何解决这个问题？我错过了一些明显的东西，还是这是不可避免的？

感谢您提供任何建议和答案：）。

Answer 1

项目视图中的click事件似乎未绑定到特定的DOM对象。监听通用点击事件可能会覆盖Backbone，无法监听您的特定.item点击事件。尝试在项目视图点击事件中添加ID或类名，以消除任何歧义。

var Item = Backbone.View.extend({

  ...

  events: {
    "click .some-class" : "toggle" // This should fix your problem
  },

  ...

Answer 2

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

Backbone delegateEvents不冒泡/传播

2 个答案:

原评论回答：