Question

I am building a gallery-like picker view in Backbone.js. The picker has many thumbnail views bound to models within a collection and a large preview view for the currently selected thumbnail. Clicking a thumbnail will fire a Backbone.Event to change the preview view’s model. The preview view, however, observes several Backbone events on the model to change state depending on the model’s attributes.

I’m having trouble when it comes to unregistering Backbone events on the previous model and re-registering the same events on the new model. I don’t always have reference to the original .on() registration, and I am tempted to simply call this.model.off() to unregister all the model’s events (I don’t want to destroy any other events the model may have, however). The Backbone.js documentation outlines that calling .off(null, null, context) will unregister the events from the object within the current context. I am uncertain, however, if this will unregister all events just for the current view instance.

Answer 1

Let’s use this setup to register and unregister events:

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"});

As is, creating a new MainView won’t destroy the previous bindings and will result in a zombie view. The last 3 lines give the following result:

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

The accompanying Fiddle : http://jsfiddle.net/9xufW/

Let’s test the off method with a specific context:

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);
    }
});

Calling

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

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

yields the expected result

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/

The callbacks set in the thumbviews are preserved while the callbacks set in the main view are removed. Note that the teardown method could and probably should be used to undelegate DOM events.

Another Fiddle where the model in the main view is replaced instead of destroying/recreating the view http://jsfiddle.net/9xufW/2/