骨库的实例太多。查看和backbone.model
-
11-12-2019 - |
题
我有一个主视图,负责呈现其他视图...... 这是完整的代码(1)(2)(3)。
当我加载第一次视图时(View1,View2,View3),一切都可以。
然后,如果我尝试重新加载view更改它。这显然看起来很好..
但我注意到有一些僵尸观点......,
我的意思是在内存中先前视图的实例。
我发现这是使用这个代码的平安...
View1 = Backbone.View.extend({
initialize: function ()
{
this.model.on('change', function () {
console.log(this.cid);
}, this);
}
});
.
展望cid
我发现每次我重新加载查看新视图
生成不同的CID并保持内存。
exampple
** 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
};
});