remove orphaned child views in backbone - backbone.js

Question

I have a backbone view that contains project data for various research projects.
In this view, I have a button, that when clicked, it executes a method called 'toggleChildView'. This method inserts a child view into the main page.
In the child view, I'm listening for an event where the user clicks anywhere on the page except for the element that contains the research child review.
The problem is, if I close the child view, the child view is actually still hanging around somewhere because the event is still firing, and will fire multiple times if I had opened and closed the child view.
So for example, if I opened and closed the childview 5 times, after the final close, the event will still fire 5 times.
But it shouldn't fire at all if closed, and only once when opened.
I think my question would best be phrased like this:
Is there anyway to get rid of "orphaned" child views and ensure that only one child view is open at a time?
thanks!
Parent View:
toggleChildView: function (e) {
this.$('.displayresearchdata').toggle();
this.$('.editdata').toggle();
//initialize the research view into our main view
var researchView = new researchView({ parent: this });
self.$('.research').append(researchView.render().$el);
},
saveresearchdata: function (e) {
this.model.save('researchData', this.$(".researchData").html());
},
Child render method:
initialize: function (options) {
this.parent = options.parent;
},
render: function () {
var self = this;
this.$el.append(this.template());
$("body").on("click", function (event) {
if (!$(event.target).closest('.editdata').length) {
if (self.parent.$('.editdata').is(":visible")) {
self.parent.saveresearchdata();
}
}
});
return this;
},

Answer 1

As #mu is too short points out, you need to explictly remove() any view you add.
If that view adds some custom event listeners, you should remove them too. If you use the view.listenTo(target, "eventname", this.functionName) flavor of event listening, those event handlers will be removed automatically when you call view.remove() because of the stopListening() method being called.
In your code, the problem is that you're not keeping a reference to the child view(s) you're adding, so you can't call remove on it. Keep a internal reference from the parent to the child like:
//initialize the research view into our main view
if(this._researchView) {
this._researchView.remove();
}
this._researchView = new researchView(...)
this.$(".research").empty().append(this._researchView.render().$el);
Take note of the use of empty before appending, if you don't want to have many researchViews added, only one at a time. If you indeed want many views, then you can remove that, and keep the internal reference as an array.

Answer 2

Handling so-called 'zombie' views is one of the trickiest parts of using Backbone, and if you have a lot of sub-views, it can become a real problem if you do not manage the views correctly. The seminal post on the subject is this one by Derrik Bailey although note that some of the methods he references, such as bind are now deprecated in favor of listenTo
#CharlieBrown's answer will do trick. However, if you plan on creating other views and/or subviews, here's one way you can set things up on a larger scale:
1) Create a Baseview, from which all other views will be extended.
var BaseView = Backbone.View.extend({
//typical initialize and render functions
//...
//Create the close method
close: function () {
if (this.onClose) this.onClose(); //looks for an onClose method in your subviews
this.undelegateEvents();
this.$el.off();
this.$el.children().remove();
this.$el.empty();
this.stopListening();
}
});
2) Now in your Backbone router you can create a trackView function which will call the the close() method from the base view
//within router
trackView: function (next) {
console.log('now closing ' + next.cid);
if (this.current) this.current.close();
this.current = next;
},
3) All other views in the router should now be called from within trackview like this:
//within router
someView: function () {
console.log('loading create user page');
this.trackView(new someView()); //use trackView from step 2
},
4) Finally, within any sub-views, be sure to add an 'onClose()' method where you can close down any potential zombies using the close method inherited from the Baseview:
//inside a view
onClose: function() {
if (this.couldBeAZombieView) this.couldBeAZombieView.close();
}
Now you are setup for a more complex site. There are other ways to set this up, but this is the one I'm familiar with.