javascript - 主干 - 在模型更改时注销 View 事件

Question

我正在 Backbone.js 中构建类似画廊的选择器 View 。选择器有许多绑定(bind)到集合中模型的缩略图 View 和当前选定缩略图的大预览 View 。单击缩略图将触发 Backbone.Event 以更改预览 View 的模型。然而，预览 View 会观察模型上的多个 Backbone 事件，以根据模型的属性更改状态。

在取消注册先前模型上的 Backbone 事件并在新模型上重新注册相同事件时，我遇到了麻烦。我并不总是引用原始的 .on() 注册，我很想简单地调用 this.model.off() 来注销所有模型的事件(但是，我不想破坏模型可能具有的任何其他事件)。 Backbone.js 文档概述了调用 .off(null, null, context) 将从当前上下文中的对象注销事件。但是，我不确定这是否会取消注册当前 View 实例的所有事件。

Answer 1

让我们使用此设置来注册和注销事件:

var ThumbView=Backbone.View.extend({
    initialize: function() {
        this.model.on("change:title", this.log, this);
    },

    log:function(model) {
        console.log("Thumb view : "+model.get("id")+" : "+model.get("title"));
    }
});

var MainView=Backbone.View.extend({
    initialize: function() {
        this.model.on("change:title", this.log, this);
    },

    log:function(model) {
        console.log("Main view : "+model.get("id")+" : "+model.get("title"));
    }
});

var m1=new Backbone.Model({id:1,title:"m1"});   
var t=new ThumbView({model:m1});
var v=new MainView({model:m1});

m1.set({title:"m1, 1"});
v=new MainView({model:m1});
m1.set({title:"m1, 2"});

照原样，创建一个新的 MainView 不会破坏以前的绑定(bind)并且会导致僵尸 View 。最后 3 行给出以下结果:

Thumb view : 1 : m1, 1
Main view : 1 : m1, 1
Thumb view : 1 : m1, 2
Main view : 1 : m1, 2
Main view : 1 : m1, 2

附带的 fiddle :http://jsfiddle.net/9xufW/

让我们用特定的上下文测试 off 方法:

var MainView=Backbone.View.extend({
    initialize: function() {
        this.model.on("change:title", this.log, this);
    },

    log:function(model) {
        console.log("Main view : "+model.get("id")+" : "+model.get("title"));
    },

    teardown: function() {
        this.model.off(null, null, this);
    }
});

打电话

m1.set({title:"m1, 1"});
v.teardown(); // "destroys" the old view

v=new MainView({model:m1});
m1.set({title:"m1, 2"});

产生预期的结果

Thumb view : 1 : m1, 1
Main view : 1 : m1, 1
Thumb view : 1 : m1, 2
Main view : 1 : m1, 2

http://jsfiddle.net/9xufW/1/

thumbviews 中设置的回调被保留，而主视图中设置的回调被删除。请注意，teardown 方法可以而且很可能应该用于取消委托(delegate) DOM 事件。

另一个 Fiddle，其中主视图中的模型被替换而不是破坏/重新创建 View http://jsfiddle.net/9xufW/2/