为什么我的视图复制了我传入 backbone.js 的 collection？

Question

我刚刚开始学习 Backbone.js，我正在创建几个简单的示例小提琴以供参考。我找到了一个简单的 JSON api，它将 return 一个用户列表。 JSON 响应包含一些元数据和三个用户的数组。将我的 collection 绑定到我的视图后，我还剩下 3 组额外的用户。

JS Fiddle

row_template = "<tr>" +
  "<td class='id'></td>" + 
  "<td class='first_name'></td>" +
  "<td class='last_name'></td>" +
  "<td><img class='avatar'></td>"+
  "</tr>"

var UsersView = Backbone.View.extend({
  row_template: row_template,

  initialize: function(options) {
    this.factory = new Backbone.CollectionBinder.ElManagerFactory(this.row_template, this.bindings);
    this.listenTo(options.collection, 'add', this.render);
  },

  render: function () {
    var data = this.collection;
    new Backbone.CollectionBinder(this.factory).bind(data, $('#' + this.el.id + ' table tbody'));
  },

  bindings: {
    first_name: {selector: '.first_name', elAttribute: 'text'},
    last_name: {selector: '.last_name', elAttribute: 'text'},
    avatar: {selector: '.avatar', elAttribute: 'src'},
    id: {selector: '.id', elAttribute: 'text'}
  }
});

var UsersCollection = Backbone.Collection.extend({
  url: 'https://reqres.in/api/users',
  parse: function(response) {
    return response.data;
  }
});

users = new UsersCollection();
users.fetch()

var UsersView = new UsersView({
  el: $('#UsersHolder'),
  collection: users
});


UsersView.render();

Answer 1

为集合中的每个模型发出集合事件 'add'。由于您的集合中有三个模型，渲染函数被调用了 3 次，每个模型调用一次。

解决方案

替换 'add' with 'update' 对集合的任何更改只触发一次，无论模型的数量如何。

this.listenTo(options.collection, 'update', this.render);

为什么我的视图复制了我传入 backbone.js 的 collection？

Why is my view duplicating the collection I am passing in backbone.js?

backbone.js

解决方案