1

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

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

4

1 回答 1

6

让我们使用这个设置来注册和注销事件：

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 行给出以下结果：

拇指视图：1：m1、1
主视图：1：m1、1
拇指视图：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"});

产生预期的结果

拇指视图：1：m1、1
主视图：1：m1、1
拇指视图：1：m1、2
主视图：1：m1、2

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

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

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

于 2012-06-11T13:09:32.820 回答