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

我有一个主要观点，负责提出其他观点…。 这是完整的代码（1）（2）（3）

当我第一次加载视图（视图1、视图2、视图3）时，一切正常。
然后，如果我尝试重新加载视图，则更改this.options显然是可以的。
但我注意到有一些僵尸视图…，
我指的是内存中以前视图的实例。
我发现这是使用这种和平的代码

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

查看

cid

时，我发现每次重新加载视图时都会出现新视图 使用不同的cid生成并保留在内存中。。 埃克斯枫树

** 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） 主应用程序

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

---

(三)

---

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

仅将另一个视图指定给同一图元不会删除上一个视图（多个视图可以引用同一图元）

编辑：

在重新指定视图之前，您可能希望尝试检查视图是否存在

    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之前清理现有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
    };
});

---

我知道我应该删除视图…但是如何删除？我在单击

删除按钮时从同一个视图中执行此操作。但是，当我从代码（*）中渲染视图时，如何执行此操作？在分配它们之前如何？我更新了我的答案。可能有更好的地方，但您只发布了分配视图的代码，所以有点难说。实际上，当我创建console.log（this.view1）时，每次都会得到
未定义的
。我发布了我代码中缺失的部分。您应该从（1）到（2）到（3）阅读它。看起来您每次都在分配一个新的TaskDetailView，您需要保留对该视图的引用，或者在创建新视图之前使用清理方法删除该视图及其子视图，或者更可能在重新分配之前再次调用其呈现方法并检查其子视图以删除它们。那么，您的意思是问题出在代码（2）中吗？我怎样才能保留推荐信？你能给我举个例子吗？也许我不应该每次都创建一个新实例，而只是重新渲染它们？谢谢
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
    };
});