backbone.js: aggiungere un elemento ad una collezione senza re-rendering tutta la collezione

Question

Ho una visione che si rendering da un Collezione:

render: function() { 

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

Nella inizializzatore vista, mi legano l'evento aggiunta del raccolta sulla funzione di rendering della vista:

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

altrove nell'applicazione, aggiungo un articolo alla raccolta.

bookSubscription_collection.add(model); 

Il problema con quel codice è, se posso aggiungere un nuovo elemento alla raccolta, quindi tutti gli elementi della collezione sono ri-resi.

C'è un modo per aggiungere un nuovo elemento a una raccolta senza ri-renderizzare tutti gli altri elementi, ma solo rendere il nuovo elemento?

Answer 1

Invece di associare l'evento di aggiunta della raccolta alla funzione di rendering, collegarlo ad un'altra funzione che accetta il modello che è stato aggiunto e modifica il DOM con i dati del modello che è stato aggiunto.

Answer 2

Questa è una versione semplificata di come la sto facendo. reset aggiunge tutti i modelli all'interfaccia utente e add aggiunge un singolo modello all'interfaccia utente. addAll ha fondamentalmente un ciclo che chiama addOne per ogni modello. Probabilmente potrebbe essere ottimizzato meglio ma funziona abbastanza bene.

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 ha scritto un buon esempio. Ive stato anche utilizzato come questo

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

ma penso che l'addOne è soluzione migliore