backbone intro

BackboneA Brief Introduction

Thursday, August 8, 13

What is Backbone

• 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 IS NOT

• It is not a framework


Structure


Dependencies

• jQuery (or Zepto)

• underscore (or Lo-Dash)

• JSON2.js (for old browsers such as IE)


Components

• Backbone.Events

• Backbone.Model

• Backbone.Collection

• Backbone.View

• Backbone.Router

• Backbone.History

• Backbone.sync


Event DrivenEvents

(mixin)Router

History

View

Collection

Model


Events

object = {}

_.extend object, Backbone.Events

object.on "alert", (msg) -> alert "Triggered " + msg

object.trigger "alert", "an event"


MVC

View

Controller*

Model & Collection

Control

Event


Controller

• NO Backbone.Controller

• Controller is a concept. Some put controller logic in Router, some put in View

• Controller can be extracted out as collection of functions


Controller Responsibilities

• Construct views

• Sync models/collections through API

• Connect models/collections with views


Controller Sample

todos = new TodosCollection

todosController = index: -> view = new TodoIndex collection: todos App.layout.content.show view.render()

show: (id) -> todo = todos.get(id) view = new TodoShow model: todo App.layout.content.show view.render()


Interaction

View

Controller*Router & History

ManipulateDOM Tree

DOM Events

Control

Event

Update URL

URL ChangeBack/Forward


SyncModel & Collection

Backbone.sync

HTML5 localStorage

$.ajax

CouchDB


Model & Collection


Model

• Key-value attributes

• Changes events via set method: "change", "change[attribute]"

• JSON serialization

• Validation


Collection

• Array/Hash of Models

• underscore methods

• Collection events: "add", "remove", "reset"

• Model events aggregation

• JSON serialization


class Todo extends Backbone.Modelclass TodosCollection extends Backbone.Collection model: Todo

todo = new Todo title: "Backbone", done: truetodos = new TodosCollectiontodos.add todotodos.add title: "Marionette", done: falsetodo.on 'change:done', (model) -> console.log model.toJSON()todos.on 'add', (model, coll) -> console.log "new item"

Code Sample


Backbone.sync

• Model persistence

• Signature sync(method, model, [options])

• method - CRUD

• model - model or collection to save

• options - callbacks, other options for sync implementation (e.g. jQuery ajax options)


sync implementations

• Bundled with RESTful API via jQuery.ajax

• jeromegn/Backbone.localStorage

• pyronicide/backbone.couchdb.js


https://github.com/jeromegn/Backbone.localStorage

https://github.com/jeromegn/Backbone.localStorage

https://github.com/pyronicide/backbone.couchdb.js

https://github.com/pyronicide/backbone.couchdb.js

View


DOM Manipulation

• View is attached to DOM via el attribute

• If el is not specified, it is created using tagName, id, className

• Use render to setup the HTML in el


Code Sampleclass TodoShow extends Backbone.View tagName: 'li' className: 'todo-item'

# It is good practices to use template instead, # such as Handlebars render: -> context = model.toJSON() @$el.html "<label><input type=\”checkbox\”> #{context.title} </label>" @ui = { label: @$('label'), input: @$('input') } if @model.get('done') @ui.input.prop 'checked', true @ui.label.css 'text-decoration', 'line-through' @ # It is a convention to return the view itself


Handle Model Events

class TodoShow extends Backbone.View initialize: -> # new methods in 1.0.0 # pay attention to events cycle @listenTo @model, 'change', @render

...


Handle DOM Events

• events attribute

• {"event selector": "callback"}


Code Sample

class TodoShow extends Backbone.View events: 'click label': 'toggle'

toggle: (e) -> e.preventDefault() e.stopPropagation() isDone = [email protected]('done') @model.set 'done', isDone


Router & History


Routes

• Router is auto registered when new instance is created

• routes attribute

• {"url/pattern": "callback"}

• Start routing# Use hash fragmentsBackbone.history.start()# or use HTML5 History API# Backbone.history.start({pushState: true})


Code Sample

class TodoRouter extends Backbone.Router routes: '': 'activeTodos' 'all': 'allTodos'

activeTodos: -> todosController.index(onlyActive: true)

allTodos: -> todosController.index()


backbone intro

Technology