Backbone.js的：一個元素添加到一個集合，而無需重新渲染所有收集

Question

我有使自己從一個集合視圖：

render: function() { 

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

在視圖初始化，我綁定的附加事件收集在視圖渲染功能：

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

其他地方的應用程序，我將項目添加到集合中。

bookSubscription_collection.add(model); 

該代碼的問題是，如果我添加一個新的項目集合，然後集合中的所有項目都重新呈現。

有沒有辦法將新項目添加到集合而不重新渲染所有其他項目，但只渲染新項目？

Answer 1

不是將集合的添加事件綁定到渲染函數，而是將其綁定到接受添加的模型的其他函數，並使用添加的模型中的數據修改DOM。

Answer 2

這是我如何做的簡化版本。 reset將所有模型添加到UI，並且add將單個模型添加到UI。 addAll基本上有一個循環，爲每個模型調用addOne。它可能會更好地優化，但它工作得很好。

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

亞伯拉罕寫了一個很好的例子。我一直也使用它像這樣

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

但我認爲addOne是更好的解決方案