backbone.js中的delegateEvents

Question

任何人都可以解释一下backbone.js中的delegateEvents是什么吗？文档没有帮助我理解.

我确切的用例是:

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

Answer 1

本质上,当你调用.remove()它时,它是jQuery remove函数的代理,它从DOM中删除元素,以及绑定到元素的事件散列中的所有相关事件.

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

有几个解决方案:

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

2. 创建一个方法(或扩展删除)以使用jQuery的detatch,它显然与删除相同而不会丢失事件绑定 - 没有完成它但似乎它会工作

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

希望这可以帮助.

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选择器,它针对elDOM元素的视图运行以将事件绑定到."callback"是当该DOM元素的事件触发时,此视图上要调用的方法的名称.

希望有所帮助