Представление коллекции Backbone.js отображается несколько раз для одного триггера

Question

У меня есть коллекция backbone.js и viewview. просмотр коллекции прослушивание своей коллекции 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);
  }
});

Обновленная скрипка