Backbone.js collection 单个触发器视图渲染多次

Question

我有 backbone.js collection 和 collection 观点。 collection 查看监听其 collection add 事件。但是当我向它的 collection 添加新模型时，它会为每个模型渲染多次。请勾选 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

Backbone.js collection 单个触发器视图渲染多次

Backbone.js collection view render multiple times for single trigger

listener

backbone.js

backbone-events

backbone-views

backbone.js-collections