骨干子视图和事件解除绑定

时间:2013-01-30 22:07:29

标签: javascript performance backbone.js event-handling subview

我几天一直在使用Backbone,阅读设计模式以及你有什么。在阅读了大量资源之后,今天我在搞乱子视图。主要是这2个帖子 -

德里克贝利郎 http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

伊恩风暴泰勒
http://ianstormtaylor.com/assigning-backbone-subviews-made-even-cleaner/

这些和其他对于帮助我设置一些子视图并处理我认为正确模式的结束非常有用:

Backbone.View.prototype.close = function(){
    var ctx = this;
    _.each(ctx.subViews(), function(view) {
        view.close();
    });
    this.remove();
    this.unbind();
}

这里没有问题,似乎做了我的预期。但我想测试一下,看看发生了什么。所以我停止在子视图上调用close并将我的渲染循环播放20,000次:

Backbone.View.prototype.close = function(){
    var ctx = this;
    _.each(ctx.subViews(), function(view) {
        //view.close();
    });
    this.remove();
    this.unbind();
}

此处没有僵尸事件处理程序或DOM节点。这对我来说有点令人惊讶 - 我不是jQuery内部的专家,我希望至少还有来自子节点的事件处理程序。但我想因为我的子视图都包含在父视图中,它仍然被删除和解除绑定,jQuery清除所有孩子。所以我停止了解除父元素的绑定:

Backbone.View.prototype.close = function(){
    var ctx = this;
    _.each(ctx.subViews(), function(view) {
        //view.close();
    });
    this.remove();
    //this.unbind();
}

Chrome检查器中的事件处理程序计数仍然没有增加。

所以我的问题是:

当您需要以这种方式巧妙地处理事件解除绑定和子视图时,什么是“真实”示例?是否超出了View的直接范围内的任何对象引用?仅当您的子视图未包含在父视图的$ el?

中时才会出现

1 个答案:

答案 0 :(得分:3)

当您从DOM中删除父视图时,jQuery会清除连接在子节点中的任何DOM事件。 unbind()是Backbone的Events.off的别名,它会删除您使用myChildView.on('someEvent', ...)连接的所有事件。例如,父视图可能会侦听您在子视图中触发的事件。如果您这样做,则需要拨打this.unbind()this.off()

现在Backbone.Events(从0.9.9开始)有listenTo()stopListening(),您可以考虑将this.stopListening()添加到close()。然后,如果在您的视图中,您使用了类似this.listenTo(this.model, ...)的内容,那么它们也会被正确清理。