Question

我有一个主视图负责呈现其他视图.... 这是完整的代码（1）（2）（3）。

当我第一次加载视图（View1，View2，View3）时，一切正常。
然后，如果我尝试重新加载视图，改变this.options显然似乎没问题。
但我注意到有一些僵尸的观点......，我的意思是以前的观点在记忆中的例子我发现这是使用这种代码的和平......

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

期待cid我发现每次重新加载视图新视图时生成不同的cid并留在内存中.. Examaple

** 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;
});

Answer 1

您是否忘记实际从DOM中删除视图

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

将另一个视图分配给同一个元素不会删除以前的视图（多一个视图可以引用相同的元素）。

修改：

您可能想在重新分配之前尝试检查视图是否存在

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 ：

我不知道你的mainApp第二次被调用，但也许你可能想尝试让它继续对TaskDetailsView的引用

尝试的一种方法是在分配新的TaskDetailsView之前清理现有的

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

更好的方法可能只需刷新视图的必要部分

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 }; });

Backbone.View和Backbone.Model的实例太多了

1 个答案: