为什么我的视图复制了我在骨干中传递的集合.js?

Question

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

JS小提琴

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"。由于集合中有三个模型，因此 render 函数被调用 3 次，每个模型一个。

溶液

将"add"替换为"update"，无论模型数量如何，对集合的任何更改仅触发一次。

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