Plain Jane objects vs. Backbone models

Picking up from where we left off yesterday, let’s take a look at what you would see in regular JavaScript object compared to a Backbone.js model.

Plain Jane Objects

If we create a JavaScript object called railroad:

var railroad = {
  name:'Gold Country Express',
  destination:'Folsom'
};

console.log(railroad.destination);

Then we probably would see something like this in the console:

Object
  name:"Gold Country Express"
  destination:"Folsom"

Backbone models

However if we create a Backbone.model instance called railroad like this:

var Railroad = Backbone.Model.extend();

var railroad = new Railroad({
  name:'Gold Country Express',
  destination:'Folsom'
});

console.log(railroad);

You’ll notice the information in the console is much different where you see:

Object
  _changing: false
  _pending: false
  _previousAttributes: object
  attributes: object
  changed: object
  cid: 'c1'

Go ahead and expand the objects under _previousAttributes, attributes, and changed to see what’s inside. You’ll notice that the properties/attributes you set for the instance of the Railroad model are under attributes.

Now if you wanted just the attributes of the model, you would use this method:

console.log(railroad.toJSON());

What the toJSON method does is take your model and return only the attributes in JavaScript Object Notation. This is helpful if you just want the model’s properties for outputting. The Backbone.js reference makes a note that this method doesn’t return a JSON string, but an object.

I’ve put up an example of the above code at JSBin.com for you to check out. Note: If you console.log a raw Backbone model to the JSBin console, not your browser’s console, you’ll see a bunch of code for the Backbone functions. Normally in your browser’s console you shouldn’t see that, but perhaps that’s another example of why using the toJSON method is useful.

Tomorrow, I’ll try some basic methods for models, such as initialize, get, set, and others.