Backbone - 取消注册模型更改时的事件

Question

我正在Backbone.js中构建一个类似于画廊的选择器视图.选取器具有绑定到集合中的模型的许多缩略图视图以及当前所选缩略图的大预览视图.单击缩略图将触发Backbone.Event以更改预览视图的模型.但是,预览视图会观察模型上的几个Backbone事件,以根据模型的属性更改状态.

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

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不会破坏以前的绑定,并将导致僵尸视图.最后3行给出以下结果:

Thumb view:1:m1,1
主视图:1:m1,1
Thumb视图:1:m1,2
主视图:1:m1,2
主视图:1:m1,2

伴随的小提琴: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主视图:1:m1,1
Thumb视图:1:m1,2
主视图:1:m1,2

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

在删除主视图中设置的回调时,将保留在Thumbviews中设置的回调.请注意,拆卸方法可能并且可能应该用于取消删除DOM事件.

另一个小提琴,主视图中的模型被替换而不是破坏/重新创建视图http://jsfiddle.net/9xufW/2/