MVC

Model

• Represents state of data
• Notifies View and Controllerwhen state changes

MVC

View

• Displays state of the model to User
• Receives input from User to manipulate model

MVC

Controller

• Interfaces with the actual data
• Receives update notifications from model to write back
• Pushes udpates to the model when data changes

MVP

Model

• Represents state of data
• Listens for changes from Presenter
• Handles writeback and update of Model data

MVP

View

• Passive representation of state of model
• Receives input from User to manipulate model

MVP

Presenter

• Drives changes to Model
• Formats Model data for presentation in the view

Gives structure to web applications by providing:

• models with key-value binding and custom events,
• collections with a rich API of enumerable functions,
• views with declarative event handling,

and connects it all to your existing API over a RESTful JSON interface.

Backbone.JS: Components

• Backbone.Model Represents your data, interfaces with data store
• Backbone.Collection A collection of Models
• Backbone.View Listens for model data, formats for Template rendering
• Backbone.Router Routes URLs to what should happen

Backbone.JS: Event Handling

Collection

reset (collection)

add (model, collection)

remove (model, collection)

Model

change (model)

change:attribute (model, value)

Backbone.Model

var Puppy = Backbone.Model.extend({
  defaults: {
    weight: 10
  },

  eatFood: function() {
    var currentWeight = this.get("weight");
    this.set({weight: currentWeight + 5});
  }
});

var george = new Puppy({id: 1, name: "George"});
george.eatFood();

george.save();
            

Backbone.Collection

var PuppyLitter = Backbone.Collection.extend({
  urlRoot: 'api/v1/puppies',
  model: Puppy
});

var puppies = new PuppyLitter();

puppies.add(george);
puppies.add(spot);
puppies.add(bob);

/* alternatively */
var initializedPuppies = new PuppyLitter([george, spot, bob]);
            

Underscore.js

collection fetch performs GET on urlRoot endpoint

model fetch performs GET on endpoint urlRoot + model.id

Backbone.View

var PuppyRepresentation = Backbone.View.extend({

  template: ...,
  tagName: "div",
  className: "puppy-style",

  events: {
    "click .tail":    "wag",
    "click .bowl.":   "feed"
  },

  initialize: function() {
    this.listenTo(this.model, "change", this.render);
    // equivalent to
    this.model.on("change", this.render);
  },

  feed: function() {
    this.model.eatFood();
  },

  wag: function() { ... },

  render: function() {
    this.$el.html(this.template(this.model.attributes));
    return this;
  }

});
            

Backbone.Router

  var myRouter = Backbone.Router.extend({
    routes: {
      "/":                      "home",
      "/djs/:permalink":        "djs",
      "/djs/:permalink/:mixid": "djs"
    },

    home: function() { ... },
    djs: function(permalink, mixid) { ... }
  });

  // To start tracking hashchanges
  Backbone.history.start();
            

• Defines URL routes and what we should do for each.
• Single Page app: loads master template,manipulating content with JS.
• Note: Does support pushState