Backbone.js View removing and unbinding

Question

when my page opens, I call the collection and populate the view:

var pagColl = new pgCollection(e.models); 
var pagView = new pgView({collection: pagColl});

Separately (via a Datepicker), I wish to want to populate the same collection with different models and instantiate the view again.

The problem I have is how to close the original pagView and empty the pagColl before I open the new one, as this "ghost view" is creating problems for me. The variables referred to above are local variables? is it that I need to create a global pagColl and reset() this?

Answer 1

well there has been many discussion on this topic actually, backbone does nothing for you, you will have to do it yourself and this is what you have to take care of:

1. removing the view (this delegates to jQuery, and jquery removes it from the DOM)

   // to be called from inside your view... otherwise its  `view.remove();`
   this.remove();
   

   this removes the view from the DOM and removes all DOM events bound to it.

2. removing all backbone events

   // to be called from inside the view... otherwise it's  `view.unbind();`
   this.unbind();
   

   this removes all events bound to the view, if you have a certain event in your view (a button) which delegates to a function that calls this.trigger('myCustomEvent', params);

if you want some idea's on how to implement a system I suggest you read up on Derrick Bailey's blogpost on zombie views: http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/.

another option

another option would be to reuse your current view, and have it re-render or append certain items in the view, bound to the collection's reset event

Answer 2

I was facing the same issue. I call the view.undelegateEvents() method.

Removes all of the view's delegated events. Useful if you want to disable or remove a view from the DOM temporarily.