Correct way to bootstrap Backbone Collection with data on page load

Question

I am bootstrapping all my important data in my backbone app on my initial page load. This is mainly collections. I have been stuck for a while on an issue where I was calling collection.get(id) but it was returning undefined even though I knew a model with an ID attribute of the passed ID existed.

Then when I inspected the collection in the console I noticed that the _byId array which should contain an array of my models ID's is empty.

You can see from the console print out below that the collection does have models, and those models have an ID attribute.

window.campaigns
child
  _byCid: Object
  _byId: Object
    __proto__: Object
  _callbacks: Object
  length: 32
  models: Array[32]
  models: Array[32]
  0: child
    _callbacks: Object
    _escapedAttributes: Object
    _pending: Object
    _previousAttributes: Object
    _silent: Object
    attributes: Object
    DateCreated: "23/05/2012"
    DateScheduled: ""
    DateSent: ""
    Description: null
    From: null
    ID: 1
    IsAllowed: false
    Message: null
    Name: "Some name"
    __proto__: Object
    changed: Object
    cid: "c0"
    collection: child
    __proto__: ctor
  1: child
  2: child
  3: child
  4: child
  5: child
  length: 6
  __proto__: Array[0]
  __proto__: ctor

I am bootstrapping the data using an array of JSON objects which are written to my index page on page load. I assumed that that is all you had to do, and Backbone would assume that a property called 'ID' is the ID of the model and would interpret accordingly.

Am I wrong in thinking this/am I doing this correctly?

Answer 1

I see this in your model:

ID: 1

JavaScript is case sensitive so id and ID are different things; Backbone is looking for id by default and doesn't know anything about ID.

If you use id then everything will work out of the box:

​var M = Backbone.Model.extend({});
var C = Backbone.Collection.extend({
    model: M
});
​var c = new C([
    { id: 1, str: 'where'    },
    { id: 2, str: 'is'       },
    { id: 3, str: 'pancakes' },
    { id: 4, str: 'house?'   }
]);

Demo: http://jsfiddle.net/ambiguous/nzLEC/

Or you could tell your model to use a different attribute for the id by using idAttribute:

idAttribute model.idAttribute

A model's unique identifier is stored under the id attribute. If you're directly communicating with a backend (CouchDB, MongoDB) that uses a different unique key, you may set a Model's idAttribute to transparently map from that key to id.

The first sentence of the description might be better phrased as

A model's unique identifier is stored under the id property.

to avoid some of the common confusion between JavaScript object properties and Backbone model attributes.

For example:

var M = Backbone.Model.extend({
    idAttribute: 'ID'
});
var C = Backbone.Collection.extend({
    model: M
});
var c = new C([
    { ID: 1, str: 'where'    },
    { ID: 2, str: 'is'       },
    { ID: 3, str: 'pancakes' },
    { ID: 4, str: 'house?'   }
]);

Demo: http://jsfiddle.net/ambiguous/3NhGV/