Too much instance of Backbone.View and Backbone.Model
-
11-12-2019 - |
Question
I have a main view which is responsible to render other views…. Here's the full code (1) (2) (3).
When I load for the first time the views (View1, View2, View3), everything is ok.
Then, if I try to reload the view changing this.options apparently it seems ok..
But I noticed that there are some zombie views…,
I mean instance of previous Views in memory.
I discover this using this peace of code…
View1 = Backbone.View.extend({
initialize: function ()
{
this.model.on('change', function () {
console.log(this.cid);
}, this);
}
});
Looking to the cid
I discovered that every time I re-load the view new view
with different cid are generated and stay in memory..
Examaple
** first load **:
console.log(this.cid); // cid:12
** Second load **
console.log(this.cid); // cid:12
console.log(this.cid); // cid:13
And so on...
What is wrong with my design? how can I fix it?
(1) the entry point
require([
"js/mainApp"
], function(App){
App.initialize(data.id);
});
(2) the 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
// e.g .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;
});
La solution
Are you forgetting to actually remove the views from the DOM
http://documentcloud.github.com/backbone/#View-remove
Just assigning another view to the same element won't remove the previous view (more then one view can reference the same element).
Edit:
You might want to try checking if the views exist before reassigning them
render: function ()
{
var options;
// render from template and assign this.el to the root of the element
// e.g .project-content
if (this.view1 != null) {
this.view1.remove();
}
//the rest of your code
Edit2:
I don't know how your mainApp gets called for the second time, but perhaps you might want to try having it keep a refference to the TaskDetailsView
One way to try is before assigning a new TaskDetailsView clean up the existing one
if (this._taskDetailsView != null) {
this._taskDetailsView.cleanUp().remove();
}
var taskDetailView = new TaskDetailView({
task_id: task_id,
vent: vent
});
this._taskDetailsView = taskDetailView;
A better way would probably involve just refreshing 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
};
});