Слишком много экземпляров Backbone.View и Backbone.Model

Question

У меня есть главный вид, который отвечает за отображение других представлений .... Вот полный код (1) (2) (3).

Когда я загружаю в первый раз представления (View1, View2, View3), все в порядке.
Затем, если я попытаюсь перезагрузить вид, изменив это. Очевидно, кажется, что это нормально ..
Но я заметил, что есть некоторые виды зомби ...,
Я имею в виду пример предыдущих просмотров в памяти.
я обнаружил это, используя этот мир кода ...

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

Глядя на 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

Просто присваивающей другой вид того же элемента не будет удалить предыдущий вид (более одного взгляда может ссылаться на один и тот же элемент).

Edit:

Вы можете попытаться проверить, существует ли мнение до того переназначение их

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