Слишком много экземпляра Backbone.View и Backbone.Model
-
11-12-2019 - |
Вопрос
У меня есть главный вид, который отвечает за то, чтобы оказать другие взгляды ... Вот полный код (1) (2) (3).
Когда я загружаю впервые представления (View1, View2, View3), все в порядке.
Тогда, если я попытаюсь перезагрузить вид, изменяющий этот вопрос, видимо, кажется, хорошо ..
Но я заметил, что есть некоторые виды зомби ...,
Я имею в виду экземпляр предыдущих взглядов в памяти.
Я обнаружил это, используя этот мир кода ...
View1 = Backbone.View.extend({
initialize: function ()
{
this.model.on('change', function () {
console.log(this.cid);
}, this);
}
});
.
Гуделиться к cid
, я обнаружил, что каждый раз, когда я перезагружаю вид новый вид
С другой CID генерируются и остаются в памяти ..
Example
** first load **:
console.log(this.cid); // cid:12
** Second load **
console.log(this.cid); // cid:12
console.log(this.cid); // cid:13
.
и так далее ...
Что не так с моим дизайном?Как я могу это исправить?
(1) точка входа
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
// 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;
});
. Решение
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
};
});