Backbone.jsコレクションビューは単一のトリガーで複数回レンダリングされます

Question

私はbackbone.jsコレクションとコレクションビューを持っています。そのコレクションを聞くコレクションビューaddイベント。しかし、コレクションに新しいモデルを追加すると、モデルごとに複数の時間がレンダリングされます。 JSFiddle

var ImageCollectioView = Backbone.View.extend({ 

    initialize: function() { 
    this.collection.bind('add', this.render, this); 
    }, 

    collection: imgColection, 
    el: '#cont', 
    render: function() { 
    var els = [], self = this; 
    this.collection.each(function(image){ 
     var imageView = new ImageView({model: image}); 
     self.$el.append(imageView.render().el); 
    }); 

    return this; 
    } 
}); 

Answer 1

を確認してくださいあなたのrender方法は、コレクション全体をレンダリングします。だから、モデルを追加した後は、既存のアイテムのビューをクリアする必要があります。

render: function() { 
    var els = [], self = this; 
    this.$el.empty(); 
    //------^---- clear existing 
    this.collection.each(function(image){ 
     var imageView = new ImageView({model: image}); 
     self.$el.append(imageView.render().el); 
    }); 

    return this; 
} 

言われて、それだけではなく、コレクション全体をレンダリングするよりも、単一のアイテムビューを追加する別の方法を追加することをお勧めだと：

var ImageCollectioView = Backbone.View.extend({ 
    initialize: function() { 
    this.render(); 
    this.listenTo(this.collection, 'add', this.renderItem); 
    }, 
    el: '#cont', 
    render: function() { 
    this.collection.each(this.renderItem, this); 
    return this; 
    }, 
    renderItem: function(image) { 
    var imageView = new ImageView({ 
     model: image 
    }); 
    this.$el.append(imageView.el); 
    } 
}); 

Updated Fiddle