backbone.js中的delegateEvents

Question

请问delegateEvents在backbone.js中是什么意思？文档没有帮助我理解。

我的具体使用情况是：

我有一个名为X的主视图，其中有一个内部视图Y。它们的工作非常好，但如果我转到主视图Z，然后再返回X（重用而不是重新创建），则附加到Y子元素的事件将丢失。delegateEvents可以解决这个问题，但我想知道原因。

- Yaron Naveh

Answer 1

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

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

有几种解决方案：

1. 完全销毁视图元素，包括使用新的destroy方法解除所有模型/控制器事件的绑定（目前仅在github上，将在Backbone的下一个版本中添加），并在返回时创建新视图（而不仅仅是缓存和重新呈现）- 我首选的方法

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

3. 在每次渲染时调用.delegateEvents() - 这是您目前正在做的

希望这有所帮助。

- tgriesser

Answer 2

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"。 "selector"是任何有效的jQuery选择器，它针对你的视图的el运行，以绑定事件到DOM元素上。"callback"是在此视图上调用的方法名称，当该DOM元素的事件触发时。

希望这有所帮助

- Derick Bailey

---

谢谢 - 但是当我返回到已经创建的视图时，为什么需要显式调用它呢？所有内容在第一次绑定时已经完成了。 - Yaron Naveh

这篇文章详细解释了：http://tbranyen.com/post/missing-jquery-events-while-rendering ... 因此，我认为视图重复使用是一种反模式，不要重复使用它们，而是重新创建它们。 - Derick Bailey

谢谢！您简短的解释解开了我对这个函数的困惑。 - benjaminz