Overview of Backbone

BackboneJohn Ashmead

1Wednesday, May 2, 2012

[email protected] Backbone-PhillyCoders-5/2/2012

MVC Abstraction Layer

• Events

• Models

• Views

• Collections

• Routers


mailto:[email protected]





Events

• Used for backbone’s events

• On, off, trigger

• You can role your own, e.g. “selected:true”

• Simple linked list

• Per instance

• Mixed into Models, Views, Collections, & Routers







Event callsobject.on(event, callback, [context]);// aka bind

object.off([event], [callback], [context]);

// aka unbindobject.trigger(event, [*args]);

// event = name[:namespace]








Models

• A unique ‘cId’ supplied, you set ‘id’

• “change” events issued when you use get, set to change (you can bypass)

• toJSON, fetch, parse, clone, previous, previousAttributes, save, destroy, validate, …







Model callsvar MasterPiece = Backbone.Model.extend({ option1: value1, initialize: function(arg1, …) {}});

masterPiece1 = new MasterPiece();

masterPiece1.get('option1');

masterPiece1.set('option1', 'value1');







RESTful interface• “Backbone.sync” is basic call

• Sends server a “POST”, “GET”, “PUT”, or “DELETE”, depending on whether you have requested a create, retrieve, update, or delete.

• If you define MasterPiece.url(), sync will talk to url’s of the form it returns

• Example: /masterpieces/1

• “isNew” tracks status on client







Views

• Always gets a default ‘el’ DOM element

• Has view.$el defined as $(view.el) as well

• Use “setElement” to change its element

• Instantiate “render” method to get it to work







View codevar Picture = Backbone.View.extend({ render: function(eventName) { this.$el.html(this.template( this.model.toJSON())); return this; }, events: {“change”: “render”}, template: _.template(“<div><%= title =%></div>”), close: { this.$el.unbind(); this.$el.empty();});var picture1 = new Picture({ model: monaLisa1 });





Collections

• Ordered sets of models

• Can be the “model” in a view

• Can be included in a model

• Usual functions, including most of Underscore

• Models have a “collection” property, so only one collection per model







Underscore

• Each, map, find, filter, reject,…

• First, last, flatten, uniq, …

• Memoize, delay, throttle, …

• Keys, values, extend, clone, defaults, …







Routers

• Keeps a map of hashtags to functions

• Calls the function

• Fires the event

• Uses the “hashchange” event from browser or else polls the current location







Router codevar Dispatcher = Backbone.Router.extend({ routes: {

“help”: “help”, “search/:query”: “search”},help: function(){},search: function(query){…});

<a href=”#/search/daVinci” />dispatcher1.search(“daVinci”);

Backbone.history.start(); //magic







More than one way to do itFor views: model.view or model.views[], or fire events, or create “controller” object to mediate, …

For sync: can sync per model, send sets of requests, …

For events: can mixin to any JS object, create custom events, …

For render: can use templates, direct DOM manip, jQuery UI, …







More than one place that’s using it

• LinkedIn Mobile

• Foursquare

• Khan Academy

• Groupon Now!

• Pandora







More than one place it’s documented

• http://documentcloud.github.com/backbone/

• http://documentcloud.github.com/backbone/docs/backbone.html

• http://backbonetutorials.com/

• http://blog.galk.me/post/17139384615/backbone-js-tutorial-create-a-simple-twitter-search






http://documentcloud.github.com/backbone/

http://documentcloud.github.com/backbone/

http://documentcloud.github.com/backbone/docs/backbone.html




http://backbonetutorials.com

http://backbonetutorials.com


Presented for your consideration:

• Takes care of basics of MVC

• Small, clean, & friendly code

• Flexible

• Reduces need to figure this stuff out yourself







Backbone.js






Technology

Overview of Backbone