Backbone.js bug?

Question

I have the following in test.html:

<script>
var Foo = Backbone.Model.extend({
  initialize: function(options) {
    console.log('hello!');
  }
});
var Bar = Backbone.Collection.extend({
  model: Foo
});
var m = new Bar({});
</script>

As it turns out, when the variable m is initialized, the initialize function of Foo is called. Thus, in the Firebug console, I get 'hello!'. When I comment out the line:

model: Foo,

There is no 'hello!' in the console output. Thus, declaring a model for a collection calls that model's initialize function. I think this behavior is a bit silly. I haven't read through backbones code, but is there a reason for this?

Answer 1

Well, there's nothing wrong with the behaviour of the code.
When you pass the model in the collection definition, you specify that every model in that collection will be of type Foo .
When you initialize the collection new Bar({}) , you pass a model to the collection (although, as @alexanderb stated, I think that the collections expects an array as a first argument) and it initializes it, thus outputting 'hello!' .
For example, if you do not pass any models to the collection constructor :

new Bar();// no console output

there will be no console output, and on the other hand, if you would pass an array of objects, then the collection would initialize all of the provided models :

new Bar([{},[},{}]);// will output 'hello!' 3 times

Answer 2

I believe the constuctor of collection is expecting the array of models. So, what you should do is:

var collection = new Bar( [ {} ] );

There, the initialize method of model should be called.

Answer 3

After a bit of investigation here is what i found out, the Backbone.Collection function is as follows:

var Collection = Backbone.Collection = function(models, options) {
  options || (options = {});
  if (options.model) this.model = options.model;
  if (options.comparator !== void 0) this.comparator = options.comparator;
  this._reset();
  this.initialize.apply(this, arguments);
  if (models) this.reset(models, {silent: true, parse: options.parse});
};

So if you create an initialize method for your Collection like this

initialize: function() {
  console.log('hello collection!');   
}

You will notice that the hello collection is logged before the hello from model. So the model initialisation must come from the reset function after the initialize -call. rest won't be called unless you have models passed onto your collection, which you at a quick glance don't seem to be doing, but actually in

var m = new Bar({});

Backbone interprets the {} as a model and thus initializes it in the reset -function. But {} isn't a model you say? Well, Backbone isn't too picky about that, it just needs an array of hashes that could or could not contain model attributes. The reset -function eventually leads to the add -function and finally all roads go to Rome, or should i say the _prepareModel -function

_prepareModel: function(attrs, options) {
  if (attrs instanceof Model) {
    if (!attrs.collection) attrs.collection = this;
    return attrs;
  }
  options || (options = {});
  options.collection = this;
  var model = new this.model(attrs, options);
  if (!model._validate(model.attributes, options)) return false;
  return model;
}

What happens here is that the Collection checks whether or not it has been passed a model or a hash of attributes and in the hash-of-attributes case it just creates a new model based on its defined model and passes that hash along.

Hope this not only solves the problem, but sheds some additional light on what happened there. And of course I warmly promote for everyone to read up on the backbone source code, the baddest OG of documentation .