BACKBONE.JS：私はコレクションから自分自身をレンダリングビュー持って再レンダリングするすべてのコレクション

Question

せずにコレクションに要素を追加します。ビューの初期化子で

render: function() { 

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

を、私はのaddイベントをバインドビューのレンダリング機能に関するコレクション：

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

他の場所でアプリケーションにアイテムを追加します。

bookSubscription_collection.add(model); 

私は、コレクション内のすべての項目が再描画され、その後、コレクションに新しい項目を追加する場合、そのコードの問題は、あります。

他のすべてのアイテムを再レンダリングせずに新しいアイテムをコレクションに追加する方法はありますか？新しいアイテムをレンダリングするだけですか？

Answer 1

コレクションのaddイベントをレンダリング関数にバインドする代わりに、追加されたモデルを受け入れる他の関数にバインドし、追加されたモデルのデータで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がよりよい解決策