Backbone JS

STLJS 11/17/11

@jeffsigmon

What's The Deal

Model
Views
Router

Dependencies

underscore.js
json2.js (rest/hist)
jquery/zepto (rest/hist)

Backbone.Events

Provides ability for objects to bind and trigger custom named events.
Events do not have to be declared before they are bound.
Events may take passed arguments.

Extend, Bind, Trigger, Oh My...


var cow = {};

_.extend(cow, Backbone.Events);

cow.bind("jump", function(msg) {
    log("I just jumped: " + msg);
});

cow.trigger("jump", "over the moon");

'All' Knowing

var cow = {};
_.extend(cow, Backbone.Events);

cow.bind("jump", function(msg) {
    log("I just jumped: " + msg);
});

cow.bind("all", function(eventName, msg) {
    log("I know what you did last trigger: " 
        + eventName);
});

cow.trigger("jump", "over the moon");

Event Name Convention

Namespace events using a colon as a separator

poll:start
change:name

Providing Context

This is it

This is bad

var Moon = function() {
    this.distract = function() {
        this.trigger("distracted");
    };
};
_.extend(Moon.prototype, Backbone.Events);
var Cow = function() {
    this.target = "over the moon";
    this.jump = function() {
        log("jump:" + this.target);
    };
};
var cow = new Cow(),
    moon = new Moon();
moon.bind("distracted", cow.jump);
moon.distract();

This is good

var Moon = function () {
    this.distract = function() {
        this.trigger("distracted");
    };
};
_.extend(Moon.prototype, Backbone.Events);
var Cow = function () {
    this.target = "over the moon";
    this.jump = function() {
        log("jump:" + this.target);
    };
};
var cow = new Cow (),
    moon = new Moon ();
moon.bind("distracted", cow.jump, cow);
moon.distract();

unbind

//remove the onChange callback
object.unbind("change", onChange);

// Removes all "change" callbacks.
object.unbind("change");            

// Removes all callbacks on object.
object.unbind();

Trigger Arguments


var cow = {};
_.extend(cow, Backbone.Events);

cow.bind("jump", function(over, the, moon) {
    log(over + " " + the + " " + moon);
});
cow.trigger("jump", "over", "the", "moon");

Backbone.Model

Essence of Application
Data and Logic
State Synchronization

Definition


var Pig = Backbone.Model.extend({});

Initialization


var Pig = Backbone.Model.extend({

    initialize:  function() {
        log("oink oink...");
    }

});

var pig = new Pig();

Attributes

Initializing Attributes


var Pig = Backbone.Model.extend({});

var pig = new Pig({
    name: "Wilbur",
    age: 4});

Getting Attributes


var Pig = Backbone.Model.extend({});

var pig = new Pig({
    name: "<script>alert('hi')</script>",
    age: 4});

var name = pig.get("name");
log(name);

name = pig.escape("name");
log(name);

Setting Attributes


var Pig = Backbone.Model.extend({});

var pig = new Pig({
    name: "Wilbur",
    age: 4});

log(pig.get("name"));

pig.set({name: "Jeff", age: 100});

log(pig.get("name"));

Attribute Existence


var Pig = Backbone.Model.extend({});

var pig = new Pig({name: "Wilbur"});

log(pig.has("name"));
log(pig.has("color"));

Remove an Attribute


var Pig = Backbone.Model.extend({});

var pig = new Pig({name: "Wilbur"});

log(pig.has("name"));

pig.unset("name");

log(pig.has("name"));

Remove all Attributes


var Pig = Backbone.Model.extend({});

var pig = new Pig({name: "Wilbur", age: 1});

log(pig.has("name"));
log(pig.has("age"));

pig.clear();

log(pig.has("name"));
log(pig.has("age"));

Default Attributes


var Pig = Backbone.Model.extend({
    defaults: {
        name: "don't know",
        age: -1
    } 
});

var pig = new Pig({age: 22});

log(pig.get("name"));
log(pig.get("age"));

Cloning


var Pig = Backbone.Model.extend({});

var sam = new Pig({name: "sam", age: 22});

var bill = sam.clone(); 

log(bill.get("name"));

bill.set({name: "bill"});

log(bill.get("name"));

Logic

var Pig = Backbone.Model.extend({
    defaults: {meals: 0}, 
    bellyFull: function () {
        return this.get("meals") > 2;
    },
    feed: function (meal) {
        if (this.bellyFull()) {
            this.trigger("puke");
        } else {
            this.set({"meals": 
                this.get("meals") + 1});
        }
    }
});
var pig = new Pig();
pig.feed("garbage");

Validation

Validate method in each model
Called before set and save
Accepts attributes to be updated

Validation

If Valid, do not return
If Invalid return error message
Or custom error object

Validation

If Validate returns string or object, set or save will not proceed.
In addition, the error event will be triggered.

Validation Example

var Pig = Backbone.Model.extend({
    validate: function(attrs) {
        log("try to set age to: " + attrs.age);
        if (attrs.age > 100) {
            return "I'm not that old!";
        }
    }
});
var pig = new Pig({age: 2});

pig.bind("error", function(model, error) {
    log(error);
});

pig.set({age: 191});
log(pig.get("age"));

Change Events

set attribute triggers a change event
change events also triggered for specific attributes
suppress change events with {silent: true}

Change Event Example 1


var Chicken = Backbone.Model.extend({});
var chick = new Chicken({status: "sleeping"});

chick.bind("change", function(model) {
    log("change");
});

chick.bind("change:status", 
    function(model, status) {
        log("change:status");
});

chick.set({status: "tweeting"});

Change Event Example 2


var Chicken = Backbone.Model.extend({});
var chick = new Chicken({status: "sleeping"});

chick.bind("change", function(model) {
    log("change");
});

chick.bind("change:status", 
    function(model, status) {
        log("change:status");
});

chick.set({status: "tweeting"}, 
    {silent: true});

Identity

model.id

Arbitrary string (integer id or UUID)
When set as attribute, copied onto the model as a direct property.

model.cid

Unique identifier automatically assigned to all models when first created
take the form: c1, c2, c3 ...

Change Tracking

hasChanged determines of attr has changed since last change event
previous gets previous value of changed attr
changedAttributes get attributes that have changed
previousAttributes gets previous attributes

Backbone.Collection

ordered sets of models.
trigger add and remove events
trigger any event triggered on model
iterable via underscore.js

Sets


var Duck = Backbone.Model.extend({}),
    coll = new Backbone.Collection(),
    donald = new Duck({name: "donald"});

var add = function(m, s) {
    try{coll.add(m);log(s);} 
    catch(e) {log(e);}
};

add({name: "donald"}, "1");
add({name: "donald"}, "2");
add(donald, "3");
add(donald, "4");

Add Model


var Duck = Backbone.Model.extend({}),
    coll = new Backbone.Collection();

coll.bind("add", function(duck) {
    log("duck added");
});

coll.add([new Duck({name: "Donald"})]);

log(coll.length);

Remove Model


var Duck = Backbone.Model.extend({}),
    coll = new Backbone.Collection(),
    donald = new Duck({name: "donald"});

coll.bind("remove", function(duck) {
    log("duck removed");
});

coll.add(donald);
coll.remove(donald)

log(coll.length);

Trigger model events


var Duck = Backbone.Model.extend({}),
    coll = new Backbone.Collection(),
    donald = new Duck({age: 1});

coll.add(donald);
coll.bind("change:age", 
    function(m, age) {
        log("age:" + age + " on id:" + m.cid);
    }
);

donald.set({age: 2});

Add Event


var Duck = Backbone.Model.extend({});

var coll = new Backbone.Collection();

coll.add([
    new Duck({name: "Donald"}), 
    new Duck({name: "Donald"})]);

log(coll.length);

Get model by id


var coll = new Backbone.Collection();
coll.add([
    {id: 1, name: "one"},
    {id: 2, name: "two"}]);

var found = coll.get(2);

log(found.get("name"));

Get model by cid


var coll = new Backbone.Collection();
coll.add([
    {id: 1, name: "one"},
    {id: 2, name: "two"}]);

var first = coll.at(1);
var found = coll.getByCid(first.cid);

log(found.get("name"));

Comparator

Default no comparator
Function maintains collection sort order
Accepts model returns numeric or string value
Return value is compared against other models

Comparator Example


var Dog  = Backbone.Model;
var pound = new Backbone.Collection;

pound.comparator = function(dog) {
    return dog.get("age");
};

pound.add(new Dog({age: 9, name: "End"}));
pound.add(new Dog({age: 5, name: "Middle"}));
pound.add(new Dog({age: 1, name: "Beginning"}));

log(pound.pluck('name'));

Reset

Efficient way to bulk load or clear collection.

Extending a Collection

var Wolve  = Backbone.Model;

var Pack = Backbone.Collection.extend({
    model: Wolve,
    initialize : function() {
        log("could also set comparator");
    }
});

var pack = new Pack([
    new Wolve({name: "white fang"}),
    new Wolve({name: "black flag"})]);

Proxies to Underscore.js for 26 iteration functions

forEach (each), map, reduce (foldl, inject), reduceRight (foldr), find (detect) filter (select), reject, every (all), some (any), include, invoke max, min, sortBy, groupBy, sortedIndex, toArray, size, first, rest, last without, indexOf, lastIndexOf, isEmpty, chain

Map

var coll = new Backbone.Collection([
    {name: "Marty McFly", age: 18},
    {name: "Biff Tannen", age: 38},]);

var future = function(coll, years) {
    return coll.map(function(m) {
        return {
            name: m.get("name"),
            age: m.get("age") + years}})
};
var theFuture = future(coll, 29);
log(theFuture);

Reduce

var coll = new Backbone.Collection([
    {animal: "dog", age: 1},
    {animal: "cat", age: 3},
    {animal: "human", age: 6 }]);
//get product of ages   
var res = coll.reduce(function(memo, val) {
    return memo * val.get("age");
}, 1);

log(res);

Backbone.sync

Function called to read or save a model to the server
Default, uses (jQuery/Zepto).ajax to make a RESTful JSON request.
Override it in order to use a different persistence strategy

sync(method, model, [options])

method – the CRUD method ("create", "read", "update", or "delete")
model – the model to be saved (or collection to be read)
options – success and error callbacks, and all other jQuery request options

CRUD to REST Mapping

create → POST /collection
read → GET /collection[/id]
update → PUT /collection/id
delete → DELETE /collection/id

The Payload

Backbone.sync sends up a request to save a model, its attributes will be passed, serialized as JSON, and sent in the HTTP body with content-type application/json.

Persistence Functions

model.fetch
model.save
model.destroy
collection.create
collection.fetch

backbone.localStorage.js

Local Storage With Models

https://github.com/k33g/ossicle

Save a Model


var House = Backbone.Model.extend({
    storeName : "houseDB"
});

var house = new House(
    {id:1, brick: "of course"});

house.save(null, {
    success: function (e) {
        log("saved");
    }
});

Fetch a Model


var House = Backbone.Model.extend({
    storeName : "houseDB"
});

var house = new House({id:1});

house.fetch({
    success: function (m) {
        log("found: " + m.get("brick") );
    }
});

Destroy a Model


var House = Backbone.Model.extend({
    storeName : "houseDB"
});

var house = new House({id:1});

house.destroy({
    success: function (m, r) {
        log("get lost punk" );
    }
});

Are You Sure?


var House = Backbone.Model.extend({
    storeName : "houseDB"
});

var house = new House({id:1});

house.fetch({
    error: function (m) {
        log("thank god");
    }
});

But I Don't Know My ID!


var House = Backbone.Model.extend({
    storeName : "houseDB"
});

var house = new House({brick: "who cares"});
log(house.isNew());
house.save();
log(house.isNew());
log(house.cid);
log(house.id);

Fetch A Collection


var House = Backbone.Model.extend({storeName : "house2DB"});
var Ghetto = Backbone.Collection.extend({model : House, storeName : "house2DB"});

var house1 = new House({id:1, name: "house1"});
var house2 = new House({id:2, name: "house2"});
house1.save();
house2.save();
var ghetto = new Ghetto();
ghetto.fetch({error : 
    function(coll, res) {
        log(coll);
    }
});

Backbone.View

Organize interface into logical views, backed by models
Each view can be updated independently when the model changes
Do not re-render entire page for changes! DUH!

Backbone.View

bind view's render function to the model's change event
Do not dictate HTML or CSS structure
Use with any templating library

view.el

All views have a DOM element at all times
Created from the view's tagName, className, and id properties
In not specified, a div is used
Can assign el to pre-existing elem

z, ?	toggle help (this)
space, →	next slide
shift-space, ←	previous slide
d	toggle debug mode
## <ret>	go to slide #
c, t	table of contents (vi)
f	toggle footer
r	reload slides
n	toggle notes
p	run preshow

Backbone JS

STLJS 11/17/11

@jeffsigmon

What's The Deal

Dependencies

Backbone.Events

Extend, Bind, Trigger, Oh My...

'All' Knowing

Event Name Convention

Namespace events using a colon as a separator

Providing Context

This is it

This is bad

This is good

unbind

Trigger Arguments

Backbone.Model

Definition

Initialization

Attributes

Initializing Attributes

Getting Attributes

Setting Attributes

Attribute Existence

Remove an Attribute

Remove all Attributes

Default Attributes

Cloning

Logic

Validation

Validation

Validation

Validation Example

Change Events

Change Event Example 1

Change Event Example 2

Identity

model.id

model.cid

Change Tracking

Backbone.Collection

Backbone.Collection

Sets

Add Model

Remove Model

Trigger model events

Add Event

Get model by id

Get model by cid

Comparator

Comparator Example

Reset

Efficient way to bulk load or clear collection.

Extending a Collection

Proxies to Underscore.js for 26 iteration functions

Map

Reduce

Backbone.sync

sync(method, model, [options])

CRUD to REST Mapping

The Payload

Backbone.sync sends up a request to save a model, its attributes will be passed, serialized as JSON, and sent in the HTTP body with content-type application/json.

Persistence Functions

backbone.localStorage.js

Local Storage With Models

https://github.com/k33g/ossicle

Save a Model

Fetch a Model

Destroy a Model

Are You Sure?

But I Don't Know My ID!

Fetch A Collection

Backbone.View

Backbone.View

view.el

Simplest View