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?

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?

• javascript
• backbone.js

4 Answers 4

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

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.

I use the stopListening method to solve the problem, usually I don't want to remove the entire view from the DOM.

view.stopListening();

Tell an object to stop listening to events. Either call stopListening with no arguments to have the object remove all of its registered callbacks ... or be more precise by telling it to remove just the events it's listening to on a specific object, or a specific event, or just a specific callback.

http://backbonejs.org/#Events-stopListening

Here's one alternative I would suggest to use, by using Pub/Sub pattern.

You can set up the events bound to the View, and choose a condition for such events.

For example, PubSub.subscribe("EVENT NAME", EVENT ACTIONS, CONDITION); in the condition function, you can check if the view is still in the DOM.

i.e.

var unsubscribe = function() {
    return (this.$el.closest("body").length === 0);
};
PubSub.subscribe("addSomething",_.bind(this.addSomething, this), unsubscribe);

Then, you can invoke pub/sub via PubSub.pub("addSomething"); in other places and not to worry about duplicating actions.

Of course, there are trade-offs, but this way not seems to be that difficult.