Question

For the following code, the add event bound in the view fires twice (more if you add more elements to the collection at once).

http://jsfiddle.net/radu/GnG66/

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' });
});​

If instead of adding an array to the collection, you just pass several objects as arguments (basically just remove the square brackets), the event only fires once.

Is this by design and is there a way to override this behaviour without passing { silent : true } as an option?

Answer 1

The add event is fired once for each model added.

Collection.add can take an array of models, or a single model and some options.

In your example above, you are passing an array of two models in. Since the add event gets fired once for each model added, it fires twice.

When you pass in several objects, Backbone thinks the first object is a model and the second is a hash of options. That means only one model is being added, so it fires the add event once.