Question

I have a backbone view with a model inside it. When I call the remove() on the view the events set to the model inside the removed view stay alive. I tried model.destroy() but from what I can gather this only works on the server end and not for models inside a view. or maybe I’m wrong in this.

Also when I call remove on the view I presume its just taking the views el property and calling the remove on that. If so is there a callback that you can listen for to destroy the binded events on the model inside the view.

Answer 1

You can unbind all events on the model by calling model.unbind(). So you could override the remove method on the view like this:

remove: function() {
    this.model.unbind();
    Backbone.View.prototype.remove.call(this);
}

Actually destroying the model is a little trickier. If the model is in a collection, you might try calling model.trigger('destroy') before calling .unbind() – this will remove the model from any collections that contain it. You can then set the view.model to null, removing the reference from the view and hopefully freeing up the model for garbage collection. You might also call model.clear() to clear its fields, but this probably isn’t necessary. So your full remove function might look like:

remove: function() {
    this.model.trigger('destroy');
    this.model.unbind();
    this.model = null;
    Backbone.View.prototype.remove.call(this);
}