Don't let your Backbone.js views grow up to be Zombies!

Since its almost Halloween, I thought this would be a timely tip. It also happens to be one of Backbone.js articles I reference the most:

• Zombies! RUN! (Managing Page Transitions In Backbone Apps) http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

The key is implementing a 'close' method on all Backbone views:

Backbone.View.prototype.close = function(){
  this.remove();
  this.unbind();
  if (this.onClose){
   this.onClose();
  }
}

The main thing to watch out for is assigning multiple views to the same DOM element (take it from me - this is bad!), calling close() will destroy that shared element. For example, this is the BAD WAY:

MyPage.Views.List = Backbone.View.extend({
    el : '#mypage'
});

Instead, it's better to let the view create its own root element (which you can change with the 'tagName' property) and place it where you want it in the DOM, preferably with this.$el.html(myPage) or this.$el.append(myPage) in the parent view.

Or if you are starting a fresh Backbone.js project, you can save yourself a lot of headache and use the excellent Backbone LayoutManager project.

• image credit: TheDarkCloak