Pattern to manage views in backbone

Question

Coming from GWT, Backbone seems to miss a built-in solution on how to handle the life-cycle of a view. In GWT, every activity, which is more or less the equivalent to a View in Backbone, is managed by an ActivityManager which calls onStart/onStop on the activity, passing the eventBus and the element where the Activity can be rendered in. On stop, the ActivityManager will unbind all events the activity has bind to the eventbus and remove the view from the DOM.

In Backbone, it's easy to bind the events to model and collection but you have to remove them manually and there is no common api method where you will do this.

So I'm looking for best practice pattern on how to manage views to ensure no killed or disabled views are listening unnecessary to events.

Answer 1

you are right, there is no build in solution to that (yet).

however it is of course possible to extend backbone to provide this functionality, Derick Bailey has written a blog post about this recently,

take a look here: http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

this is by no means the holy grail, you are free to implement as you wish, but it is a very straight forward approach, for handling zombie views, now you still need to take care of other creatures crawling in your memory, but this is a start with the views at least!

Answer 2

I'm using a custom BaseView, which extends Backbone's remove method:

app.BaseView = Backbone.View.extend({

    views: [], // array to keep a ref of child-views for proper disposal later on

    remove: function() {

        // dispose any sub-views
        _.each(this.views || [], function(view) {
            view.remove();
        });

        // if the inheriting class defines a custom on-remove method, call it!
        _.isFunction(this.onRemove) && this.onRemove();

        // unbind all events from this view
        this.off();

        // finally, call Backbone's default remove method to
        // remove the view from the DOM
        Backbone.View.prototype.remove.call(this);
    }
}

There's still a catch: models and collections need to be disposed by hand, because you don't know if it's used by other views too.

Answer 3

Seems Marionette finally has the functionality I'm looking for.