Backbone.js: añadir un elemento a una colección sin volver a prestar toda la colección

Question

Tengo una visión que prestan en sí a partir de una colección:

render: function() { 

    $(this.el).html(JST['templates/menu']({collection: this.collection })); 
    $('#nav').html(this.el);  
} 

En la vista de inicialización, Ato el caso del complemento colección en la función de representación de la vista:

initialize: function() { 
    this.render(); 
    var self = this; 
    this.collection.bind("add", function(event){ 
     self.render(); 
    }); 
} 

en otro lugar de la aplicación, agrego un elemento a la colección.

bookSubscription_collection.add(model); 

El problema con ese código es decir, si puedo añadir un nuevo elemento a la colección, a continuación, se re-renderizados todos los elementos de la colección.

¿Hay alguna manera de agregar un nuevo elemento a una colección sin volver a presentar todos los demás elementos, pero simplemente renderizar el nuevo elemento?

Answer 1

En lugar de vincular el evento de agregar de la colección a la función de renderizado, vincúlelo a alguna otra función que acepte el modelo que se agregó y modifique el DOM con los datos del modelo que se agregó.

Answer 2

Esta es una versión simplificada de cómo lo estoy haciendo. reset agrega todos los modelos a la interfaz de usuario y add agrega un único modelo a la interfaz de usuario. addAll básicamente tiene un bucle que llama a addOne para cada modelo. Probablemente podría optimizarse mejor, pero funciona lo suficientemente bien.

initialize: function() { 
    _.bindAll(this, 'render', 'addOne', 'addAll'); 

    leads.bind('add', this.addOne, this); 
    leads.bind('reset', this.addAll, this); 
    }, 
    render: function() { 
    this.addAll(); 
    return this; 
    }, 
    addOne: function(model) { 
    // add the model to HTML 
    }, 
    addAll: function(options) { 
    leads.each(this.addOne); 
    return this; 
    } 

Answer 3

abraham escribió un buen ejemplo. También he estado utilizando como este

initialize: ->  
    self = @ 
    @model.bind "add", (task) -> 
    $(self.el).append new app.TaskIndexItemView(model: task).render().el 

pero creo que la solución es mejor addOne