Too many instances of Backbone.View and Backbone.Model

Question

I have a basic view that is responsible for displaying other views .... Here's the full code (1) (2) (3).

When I load the views for the first time (View1, View2, View3), everything is fine.
Then, if I try to reload the view by changing this. Obviously, this seems to be normal ..
But I noticed that there are some zombie looks ...,
I mean an example of previous representations in memory.
I discover this using this world of code ...

View1 = Backbone.View.extend({ initialize: function () { this.model.on('change', function () { console.log(this.cid); }, this); } }); 

Looking at cid , I found that every time I reload a new view view with different cid generated and remain in memory. Exam

 ** first load **: console.log(this.cid); // cid:12 ** Second load ** console.log(this.cid); // cid:12 console.log(this.cid); // cid:13 

Etc...

What is wrong with my design? how can i fix this?

---

(1) entry point

 require([ "js/mainApp" ], function(App){ App.initialize(data.id); }); 

---

(2) mainApp

 define([ "js/views/taskDetailView" ], function (TaskDetailView) { var initialize = function(task_id){ var vent; vent = _.extend({}, Backbone.Events); // The Event Aggregator var taskDetailView = new TaskDetailView({ task_id: task_id, vent: vent }); $(".project-content").html(taskDetailView.$el); } return { initialize: initialize }; }); 

---

(3)

 define([ "js/views/view1", "js/views/view2", "js/views/view3", "text!templates/Task/TaskDetailedView.html" ], function (View1, View2, View3, taskDetailedViewTemplate) { var TaskDetailView = Backbone.View.extend({ el: $(".project-content"), initialize: function () { this.render(); }, render: function () { var options; // render from template and assign this.el to the root of the element // eg .project-content this.setElement($(Mustache.render(taskDetailedViewTemplate))); this.view1 = new View1(_.extend( {el:this.$("#taskView")} , this.options)); this.view2 = new View2(_.extend( {el:this.$("#feedView")} , this.options)); this.view3 = new View3(_.extend( {el:this.$("#followerView")} , this.options)); } }); return TaskDetailView; }); 

Answer 1

Do you forget to actually remove views from the DOM

http://documentcloud.github.com/backbone/#View-remove

Simply assigning another view to the same element will not delete the previous view (more than one view can refer to the same element).

Edit

You might want to check if views exist before reassigning them.

  render: function () { var options; // render from template and assign this.el to the root of the element // eg .project-content if (this.view1 != null) { this.view1.remove(); } //the rest of your code 

Edit2 :

I don't know how your mainApp will be called a second time, but you might want to try to keep it replicated in TaskDetailsView

One way to try is to clear an existing one before assigning a new TaskDetailsView

  if (this._taskDetailsView != null) { this._taskDetailsView.cleanUp().remove(); } var taskDetailView = new TaskDetailView({ task_id: task_id, vent: vent }); this._taskDetailsView = taskDetailView; 

The best way is probably just updating the necessary parts of the view

 define([ "js/views/taskDetailView" ], function (TaskDetailView) { var _taskDetailView; var initialize = function(task_id){ var vent; vent = _.extend({}, Backbone.Events); // The Event Aggregator if (this._taskDetailsView == null) { var taskDetailView = new TaskDetailView({ task_id: task_id, vent: vent }); this._taskDetailsView = taskDetailView; } else { this._taskDetailsView.refresh({task_id: task_id, vent: vent }); } $(".project-content").html(taskDetailView.$el); } return { initialize: initialize }; });