Question

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

我的确切用例是：

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

Answer 1

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

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

有一些解决方案：

完全销毁视图元素，包括使用新的destroy方法解除所有模型/控制器事件的绑定（目前仅在github中，它将在Backbone的下一个版本中添加）并创建一个新的回来时查看（而不仅仅是缓存和重新渲染） - 我的首选方法
创建一个方法（或扩展删除）以使用jQuery的detatch，它显然与删除相同而不会丢失事件绑定 - 没有完成它但看起来它会起作用
在每个渲染中调用.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选择器，它针对您的视图el运行，以便DOM元素将事件绑定到。 “callback”是当该DOM元素的事件触发时，此视图上要调用的方法的名称。

希望有所帮助

backbone.js中的delegateEvents

2 个答案: