Backbone intro

Backbone
A 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.Collecti
on
• Backbone.View
• Backbone.Router
• Backbone.History
• Backbone.sync

Event Driven
Events
(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 inView
• 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
Manipulate
DOM Tree
DOM Events
Control
Event
Update URL
URL Change
Back/Forward

Sync
Model & 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.Model
class TodosCollection extends Backbone.Collection
model: Todo
todo = new Todo title: "Backbone", done: true
todos = new TodosCollection
todos.add todo
todos.add title: "Marionette", done: false
todo.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

DOM Manipulation
• View is attached to DOM via el attribute
• If el is not speciﬁed, it is created using
tagName, id, className
• Use render to setup the HTML in el

Code Sample
class 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
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
events:
'click label': 'toggle'
toggle: (e) ->
e.preventDefault()
e.stopPropagation()
isDone = !@model.get('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 fragments
Backbone.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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Backbone intro

Similaire à Backbone intro (20)

Dernier

Dernier (20)

Backbone intro