Question

对于以下代码，视图中绑定的add事件将触发两次（如果您一次向集合中添加更多元素，则会触发更多）。

App = window.App || {};

var Model = Backbone.Model.extend();
var Collection = Backbone.Collection.extend();
App.collection = new Collection({ model: Model });

var View = Backbone.View.extend({
    events: {
        'click': function() {
            console.log('click');
            App.collection.add([{
                foo: 'foo'
            }, {
                bar: 'bar'
            }]);
        }
    },
    initialize: function() {
        App.collection.on('add', function() {
            console.log('Something has been added to the collection')
        }, this);
    }
});

$(function() {
    App.view = new View({ el: '#test' });
});

如果不是向集合中添加数组，而是将几个对象作为参数传递（基本上只是删除方括号），事件只会触发一次。

这是设计的吗？是否有办法覆盖此行为而不传递{ silent : true }作为选项？

Answer 1

为每个添加的模型触发add事件一次。

Collection.add可以采用一系列模型，或单个模型和一些选项。

在上面的示例中，您传递的是两个模型的数组。由于add事件会为每个添加的模型触发一次，因此会触发两次。

当您传入多个对象时，Backbone认为第一个对象是模型，第二个是选项的哈希。这意味着只添加了一个模型，因此它会触发add事件一次。

Answer 2

很抱歉从死里复活这个问题，但我也遇到了这个问题，并希望发布我是如何解决它的。让'add'触发这么多次的问题是因为我在视图中有一个复杂的渲染函数正在侦听'add'。这导致严重的性能问题。

我通过使用骨干的方便collection.clone()方法创建临时集合，向其添加新模型，然后使用临时集合重置原始集合来解决它{{{ 1}}属性。代码如下所示：

models

这只会引发一个// Create a temporary copy of searchResults var temp = App.searchResults.clone(); // Add the new results temp.add(newResults.models); // Copy the new data over the old data App.searchResults.reset(temp.models); // Added this since reset triggers 'reset' and my view is listening for 'change add remove' this.get('filtered_flights').trigger('change');个事件而不是几个'change'个事件。

Backbone集合添加方法被触发两次

2 个答案: