Backbone 101

  • An open-source JS library
  • Helps organize JS for large web apps
  • Uses object-oriented principles for models and views

Backbone Pre-reqs

  • Object-oriented JS
  • Using a library
  • jQuery

...which we'll review!

Backbone Topics

  • Models
  • Views
  • Templating
  • CRUD Backend

...and we'll have exercises for each!


Object-oriented JS

Object-oriented JS

// The object "constructor"
var Product = function(config) {
  // The object "properties" =;
  this.type = config.type;
  this.inventory = config.inventory || 0;

// An object "method" = function() {
  console.log("We now have " + this.inventory + " of " +;

// Instantiating a new object
var product = new Product({
  name: "BetaBrand Disco FannyPack",
  type: "Accessory",
  inventory: 20

// Calling a method on a new object;

Object-oriented JS

var Shirt = function(config) {
  // Re-using the Product constructor, config);
  this.colors = config.colors;
// Inheriting the Product methods
Shirt.prototype = Object.create(Product.prototype);

// Defining a new method on this object
Shirt.prototype.addColor = function(color) {
  console.log("We now stock " + color);

// Instantiating a new object
var shirt = new Shirt({
  name: "Three Wolves Shirt",
  type: "T-Shirt",
  inventory: 33,
  colors: ["black"]

Using a library

  • Include a script tag to the library on your page
  • Call functions from that library

<script src=""></script>
    var answer = math.sum(2, 2);


// Finding elements
var code = $('code.javascript');
// Reading elements
// Changing elements
code.css('background-color', 'pink');
// Creating elements
var newCode = $('<code>// Whee!</code>');



What is a model?

Defining a model

You can define a basic Backbone Model with .extend()

var Product = Backbone.Model.extend();

You can also pass in an object for more configuration...

Setting defaults

var Product = Backbone.Model.extend({
  defaults: {
    name: "California",
    type: "T-shirt",
    colors: ["light gray"],
    tagline: "Cali says relax",
    newProduct: true,
    inventory: 28

Note that an object literal is being passed into .extend()

Consider: Where else have we seen objects as arguments?

Instantiating new models

Create an empty model that inherits all the defaults

var shirt = new Product();

You can also override the defaults with an object

var shirt = new Product({
  name: "Roma",
  colors: ["green", "white", "red"],
  onSale: true,
  freeShippingEligible: false

Setting and getting attributes

Use .set() and .get() for Backbone Models

shirt.set('tagline', 'sempre ad maiora');
shirt.set('newProduct', false);
shirt.set('inventory', 1);
shirt.get('tagline'); //returns 'sempre ad maiora'
shirt.get('newProduct'); // returns false
shirt.get('inventory'); // returns 1

If you try to access Model properties via dot/bracket notation, they'll be undefined

shirt.tagline; // undefined
shirt['tagline']; // undefined

Custom initialization

var Product = Backbone.Model.extend({
  initialize: function() {
    this.set('url', '' + this.get("id"));

Custom methods

var Product = Backbone.Model.extend({
  makeSentence: function() {
    console.log("Check out our very special " + this.get('type') + ".");

Exercise Time


What is a collection?

Defining a collection

You can define a basic Backbone Collection with .extend()

var Products = Backbone.Collection.extend();

You can also pass in an object for more configuration...

var Products = Backbone.Collection.extend({
  model: Product

Instantiating a collection

Pass an array of models:

var products = new Products([product1, product2, product3]);

Or pass a JSON array:

var products = new Products([
    {name: "I Love JS",
    colors: ["yellow", "black"]
    {name: "Three Wolves",
    colors: ["blue"]

Sort order

Use comparator as a property to sort a Collection

var Products = Backbone.Collection.extend({
  comparator: 'inventory'

Or for something more complex, use .comparator() as a method that returns a value to sort by

var Products = Backbone.Collection.extend({
  comparator: function(model) {
    return model.get("name").toLowerCase();

Changing a collection

Adding models:

products.add([product4, product5]);

Removing models:


Exercise Time


What's a view?

  • DOM that renders a model or collection
  • Events tied to that DOM

Defining a view

You can define a basic Backbone View with .extend()

var ProductListing = Backbone.View.extend();

You can also pass in an object for more configuration...

var ProductListing = Backbone.View.extend({
  tagName: "div", // default
  className: "product"

Customizing the render

var ProductListing = Backbone.View.extend({
  className: "product",
  render: function() {
    this.$el.append('<img src="">');
    return this;

Connecting view to model

var ProductListing = Backbone.View.extend({
  className: "product",
  render: function() {
    var imgUrl = this.model.get('imgUrl');
    var newNode = $('<img src="' + imgUrl + '">');
    return this;

var product = new Product({imgUrl: ""});

var listing = new ProductListing({
  model: product

Using the view

Create the view:

var listing = new ProductListing({
  model: product

Then append it:



var listingEl = listing.render().$el;



DOM events

var ProductListing = Backbone.View.extend({
  events: {
    'mouseover img' : 'showTooltip',
    'mouseout img': 'hideTooltip'
  showTooltip: function(e) {
    var tooltipDiv = $('<div class="product-tooltip">');
    tooltipDiv.html('<strong>' + this.model.get('review') + ' stars: </strong>');
    tooltipDiv.css({'position': 'absolute', 'top':  e.pageY, 'left': e.pageX});
  hideTooltip: function(e) {

Backbone events

Listen to Backbone events with .listenTo()

var ProductListing = Backbone.View.extend({
  initialize: function() {
    this.listenTo(this.model, 'change', this.render)
  render: function() {
  // ...

'add' 'remove' 'sort' 'change' and more...

Custom events

Trigger custom events with .trigger()

var ProductModel = Backbone.Model.extend({
  initialize: function() {

You can listen to these events, too

var ProductView = Backbone.View.extend({
  initialize: function() {
    this.listenTo(this.model, 'ready', this.render)
  render: function() {
  // ...

Exercise Time!


Handlebars is an HTML templating library. To use it:

1. Include handlebars.js on your page

2. Make a template script tag:

<script id="product-template" type="text/x-handlebars-template">
    <strong>{{ }}</strong>: {{ product.inventory }} in stock

3. Compile the template and render it with your data:

var source   = $("#product-template").html();
var template = Handlebars.compile(source);
var litterRobot = {"name": "Litter Robot", "inventory": 20};
var rendered = template({product: litterRobot});

Backbone & Handlebars

In the HTML:

<script id="products-template" type="text/x-handlebars-template">
  {{#each products}}
    <div class="product">
      <strong>{{ name }}</strong>: {{ inventory }} in stock

In the JS:

var ProductsListing = Backbone.View.extend({
  className: 'products',
  render: function() {
    var template = Handlebars.compile($("#products-template").html());
    var rendered = template({products: this.collection.toJSON()});
    return this;

var products = new Products([product1, product2]);
var listings = new ProductsListing({collection: products});

Exercise Time

The Backbone Backend


Operation name HTTP method Backbone Model Backbone Collection
READ GET model.fetch() collection.fetch()
DELETE DELETE model.destroy()

Saving a model


var Product = Backbone.Model.extend({
  urlRoot: ''

var shirt = new Product({
  desc: "GDISF Backbone.js",
  category: "t-shirt",
  price: "20",
  inventory: 10

Updating a model


shirt.set('inStock', true);;

Deleting a model



Getting a Collection


var ProductCollection = Backbone.Collection.extend({
  url: "",
  model: Product
var products = new ProductCollection();

products.fetch(); // sets models on the collection from the response

Backend + View

var BookShelfView = Backbone.View.extend({
  initialize: function() {
    this.listenTo(this.collection, 'reset', this.render);
  render: function() {
    // ...

Exercise Time!

MV* Frameworks

Keep your options open

Figure out what's important to you:
modularity? data binding? testability? persistance?

Review your options:
Ember? Spine? AngularJS? Enyo? and many more...

There's no "right answer"

...but some are better than others.