30

谁能解释一下backbone.js中的delegateEvents有什么作用？该文档没有帮助我理解。

我的确切用例是：

我有一个主视图 X 和一个内部视图 Y。它们工作得很好，但是如果我转到主视图 Z，然后返回到 X（重用，而不是重新创建），那么附加到 Y 子元素的事件就会丢失。delegateEvents 解决了这个问题，但我想了解原因。

4

2 回答 2

40

本质上，当您调用它时，它是 jQuery remove.remove()函数的代理，该函数从 DOM 中删除元素，以及绑定到该元素的事件哈希中的所有关联事件。

Backbone 的 View 元素仍然包含.el，但是在重新插入 DOM 时，jQuery 元素失去了所有绑定的侦听器。

有几个解决方案：

  1. 彻底销毁视图元素，包括用新的destroy方法解除所有模型/控制器事件的​​绑定（目前只在github，下个版本的Backbone会添加）并在回来时创建一个新的视图（而不仅仅是缓存和重新渲染） - 我的首选方法

  2. 创建一个方法（或扩展删除）以使用 jQuery 的detatch，它显然与 remove 相同，而不会丢失事件绑定 - 尚未完成，但似乎可以工作

  3. 调用.delegateEvents()每个渲染 - 你现在正在做什么

希望这可以帮助。

于 2012-06-17T19:03:04.583 回答
13

delegateEvents 接受events: { ... }视图实例的声明，并将指定的事件绑定到指定的 DOM 元素，并使用指定的回调方法来处理事件。

因此，渲染后的 DOM 树如下所示：

<div> 
  <a href="#" id="foo">foo</a>
</div>

和这样定义的视图：


Backbone.View.extend({
  events: {
    "click .foo": "fooClicked"
  },

  fooClicked: function(e){
    // handle the click, here
  },

  render: function(){
    // render the specified HTML, here
  }
});

将正确处理单击“foo”链接，以便您可以响应代码中的单击。

声明的细分events是："eventname selector": "callback"其中“eventname”是任何 DOM 事件，例如“click”。“选择器”是任何有效的 jQuery 选择器，它针对您的视图运行，el以便将事件绑定到 DOM 元素。“回调”是该视图上要调用的方法的名称，当该 DOM 元素的事件触发时。

希望有帮助

于 2012-06-17T18:54:36.647 回答