Backbone.js - Remove all sub views

Question

I have a top level PageView that will re-render itself whenever the route changes. I have many nested sub-views embedded into this PageView. If I was to re-render PageView, do I need to remove/unbind all the nested sub-views along with the PageView or do I only need to remove/unbind the PageView? If I need to remove/unbind all the sub-views, what is the best way to go about doing this?

Answer 1

A simple and modular class you might find useful.

ContainerView = Backbone.View.extend({
  initialize: function() {
    this.children = [];
  },
  remove: function() {
    Backbone.View.prototype.remove.apply(this, arguments);
    this.removeAllChildren();
  },
  removeAllChildren: function() {
    _.each(this.children, function(view) { view.remove(); });
    this.children = [];
  },
  appendAllChildren: function() {
    _.each(this.children, function(view) { this.$el.append(view.render().$el); }, this);
  }
});

usage:

MyView = ContainerView.extend({
  render: function() {
    this.removeAllChildren();
    this.$el.empty();

    // For each child view...
    // this.children.push(new SomeControl(...));

    this.appendAllChildren();
    return this;
  }
});

Answer 2

Yes, you need to properly remove and unbind them:

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

The easy way to do this is to store an array of your sub-views in the parent view. Then in a close method on the parent view, loop through the array and call a close method on the child views:

ParentView = Backbone.View.extend({
  initialize: function(){
    this.childViews = [];
  },

  render: {
    for (var i = 0; i < 10; i++){
      var childView = new ChildView();
      // do stuff with the child view
      this.childViews.push(childView);
    }
  },

  close: function(){
    this.remove();
    this.unbind();
    // handle other unbinding needs, here
    _.each(this.childViews, function(childView){
      if (childView.close){
        childView.close();
      }
    })
  }
});

Be sure to call the close method on the parent view when you are ready for it to be removed / replaced. This will ensure all of the children are cleaned up properly (assuming all of them have their own close method).

Answer 3

Instead of keeping an array of children view, could iterate through all the properties of your view and see which ones are an instance of Backbone.View; you will need to make sure to set a property for each child view in your parent view.

In the example below, the child views are set to properties of the parent view. I'm not sure what the performance hit will be looping through all the properties, however, it may be easier than keeping track of a separate data structure for the child views.

Example:

var ContextView = Backbone.View.extend({
    initialize: function() {
      // views render themselves via their initialize methods
      this.titlebar = new TitlebarView({el: $("#titlebar")});       
      this.toolbar = new ToolbarView({el: $("#toolbar")});
      this.content = new ContentView({el: $("#content")});
    },
    removeChildViews: function() {      
        for(var prop in this){
            if (this[prop] instanceof Backbone.View) {
                console.log("This is a view: "+ prop + ' in ' + this[prop]);    
            }
        }
    }, 
    render: function() {
        this.$el.html(this.el);
    }
  });

Answer 4

A bit like Zengineer wrote, i like to patch Backbone.View.remove globally like the following, so that any child views attached on this are removed

var originalRemove = Backbone.View.prototype.remove;

Backbone.View.prototype.remove = function ()
{

  for (var view in this){
    if (this[view] instanceof Backbone.View && this[view] != this) {
        this[view].remove();
    } 
  }


  originalRemove.apply(this, arguments);

}