Troppa istanza di backbone.View e backbone.model

Question

Ho una visione principale che è responsabile di rendere altre viste .... Ecco il codice completo (1) (2) (3).

Quando carico per la prima volta le viste (View1, View2, View3), tutto è ok.
Quindi, se provo a ricaricare la vista cambiando questa opzione a quanto pare sembra ok ..
Ma ho notato che ci sono alcune opinioni di zombie ...,
Intendo istanza delle viste precedenti in memoria.
Scopro questo usando questa pace del codice ...

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

.

Guardando al cid ho scoperto che ogni volta che ri-caricando la nuova vista Con diversi cid sono generati e rimangono in memoria .. ESAME

** first load **:
console.log(this.cid); // cid:12

** Second load **
console.log(this.cid); // cid:12
console.log(this.cid); // cid:13

.

E così via ...

Cosa c'è di sbagliato nel mio design?Come posso aggiustarlo?

---

.

(1) Il punto di ingresso

require([
    "js/mainApp"
    ], function(App){
        App.initialize(data.id);
});

.

---

.

(2) il 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

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