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