Backbone.js: sposób przeprowadzania czyszczenia pamięci na widokach nadrzędnych oraz widokach podrzędnych

Question

Zaimplementowałem prostą metodę close() dla wszystkich widoków szkieletu, która udostępnia widok, gdy nie jest potrzebny/wymaga zresetowania.

Backbone.View.prototype.close = function() { 
    if (this.onClose) { 
     this.onClose(); 
    } 
    this.remove(); 
    this.unbind(); 
}; 

NewView = Backbone.View.extend({ 
    el: '#List ul', 
    initialize: function() {}, 
    render: function() { 
     _(this.collection.models).each(function(item) { 
      this.renderChildren(item); 
     }, this); 
    }, 
    renderChildren: function(item) { 
     var itemView = new NewChildView({ model: item }); 
     $(this.el).prepend(itemView.render()); 
    }, 
    onClose: function() { 
     this.collection.reset(); 
     // I want to remove the child views as well 
    } 
}); 

NewChildView = Backbone.View.extend({ 
    tagName: 'li', 
    render: function() { 
    } 
}); 

Teraz, po usunięciu widoku nadrzędnego, chcę również usunąć wszystkie widoki podrzędne tutaj. Wszelkie pomysły, w jaki sposób mogę to zrobić bez zapętlenie poprzez modeli takich jak ta ....

_(this.collection.models).each(function(item) { 
     item.close(); 
    }, this); 

Answer 1

myślę, że w większości przypadków należy zachować usunięcie widok w warstwie widoku, bez wpływania na swoje modele.

Jeśli na przykład usuniesz widok z komentarzami, być może inny widok w aplikacji będzie zawierał wybrane komentarze lub niektóre statystyki, a zresetowanie kolekcji również wpłynie na te widoki.

Więc myślę, że należy utrzymać to wszystko w widoku (tylko odpowiednie metody w zestawie):

NewView = Backbone.View.extend({ 
    initialize: function() { 
     this.childViews = []; 
    }, 
    renderChildren: function(item) { 
     var itemView = new NewChildView({ model: item }); 
     $(this.el).prepend(itemView.render()); 
     this.childViews.push(itemView); 
    }, 
    onClose: function() { 
     _(this.childViews).each(function(view) { 
     view.close(); 
     }); 
    } 
});