TODO: Go back and fix the first part of this lesson.
The code at the bottom works, but I need to make the rest of the page reflect that.

This lesson covers:

• Backbone.js
• Backbone Models
• Backbone Collections

Backbone.js

Backbone has taken the javascript world by storm. Personally, backbone.js taught me how to organize my code, and has made working in large teams far easier. It combines powerful prototype features with the simplicity that javascript developers have been accostumbed too.

Backbone takes a very classical model-view-controller look at client side applications. The focus is not only to create readable code, but to create code that is reuseable across pages and applications. This is a great system if you keep to it. And if you don’t you end up with some loosely linked modules, that are still useable on their own.

The view page will walk you through building a backbone application.

Backbone Models

Models are the link to the server. Ideally, anything coming in or out of the page, once it has loaded, should go through a model. This will keep you from re-writing $.ajax objects, and should allow you to reuse your models on other pages.

Even more than that, models should hold onto any data you have, and should be unique to one product or object. Try to avoid using arrays in a model. Any kind of array should be a collection. But I digress.

We are going to recreate the ‘total’ request from the create page in backbone. Backbone models expect to use a rails like backend, the routes should conform to those standards. We can change these defaults but the routing scheme is a good one to know, so that is what we will be using. This example is a bit contrived but it will get us started. Baby steps, baby steps.

var TotalModel = Backbone.Model.extend({
    id : 'total',
    url : '/products/total'
});


var totalModel = new TotalModel();

totalModel.on('change:total', function(model, total) {
    $("#total").text(total);
});

totalModel.fetch({
    success : function (a, b, c) {
        totalModel.set('total',b);
    }
});

There is a bunch going on here, so let me break it down.

var TotalModel = Backbone.Model.extend({
    id : 'total',
    url : '/products/total'

});

We first create the prototype for the model. This would usually hold any functions we will need later on, but here we just have a couple settings. There are a lot of functions that we might want to attach to the model, but its a good idea to only stick to these: conversions, validations, computed properties, access control (pulled directly from the backbone website). Anything else should probably be attached to a collection or a view.

var totalModel = new TotalModel();

We then create an instance of the model. In theory, we might want multiple instances of a model, one for each product for example. In this case, we only want one thing, the total number of products.

totalModel.on('change:total', function(model, total) {
    $("#total").text(total);
});

totalModel.fetch();

Finally we setup a listener and tell the model to fetch the total from the server. Both of these will move somewhere else, and the code itself will change.

Backbone Collections

TODO: someone who uses collections should re-write this. I almost never use collections.

Backbone collections at a very basic level are arrays with some added features.

Lets jump right into it and then we can break down whats going on.

var ProductCollection = new Backbone.Collection.extend({
    model : productModel,
    comparator : function(product) {
        return product.title;
    }
});

var productCollection = new ProductCollection();

productCollection.fetch();

TODO: explain whats going on here