Backbone.js: cómo realizar la recolección de elementos no utilizados en vistas principales y vistas secundarias

Question

Implementé un método simple close() para todas las vistas de red troncal que eliminan una vista cuando no es necesaria/necesita restablecerse.

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

Ahora, cuando elimine la vista principal, también quiero eliminar todas las vistas secundarias aquí. Alguna idea de cómo puedo puedo hacer esto sin bucle a través de los modelos de este tipo ....

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

Answer 1

creo que en la mayoría de los casos se debe mantener el retiro vista en la capa de vista, sin afectar a sus modelos.

Por ejemplo, si elimina una vista con comentarios, tal vez otra vista en su aplicación muestre una selección de comentarios, o algunas estadísticas, y restablecer la colección también afectaría esas vistas.

Así que creo que debe tener todo en la vista (sólo los métodos pertinentes incluidos):

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