主干 - 在模型更改时取消注册视图事件

Backbone - Unregistering View Events on Model Change

本文关键字：取消 注册 视图 事件 模型 主干      更新时间：2023-09-26

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

在

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

让我们使用此设置来注册和取消注册事件：

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/

保留在

缩略图视图中设置的回调，同时删除在主视图中设置的回调。请注意，拆解方法可以而且可能应该用于取消委托 DOM 事件。

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

相关文章：