backbone.js集合查看单个触发器多次渲染

Question

我有backbone.js集合和collectionView。收集查看收听其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);
  }
});

更新了小提琴