2. 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.
Thursday, August 8, 13
10. 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
Thursday, August 8, 13
12. 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()
Thursday, August 8, 13
16. Model
• Key-value attributes
• Changes events via set method: "change",
"change[attribute]"
• JSON serialization
• Validation
Thursday, August 8, 13
17. Collection
• Array/Hash of Models
• underscore methods
• Collection events: "add", "remove",
"reset"
• Model events aggregation
• JSON serialization
Thursday, August 8, 13
18. 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
Thursday, August 8, 13
19. 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)
Thursday, August 8, 13
20. sync implementations
• Bundled with RESTful API via jQuery.ajax
• jeromegn/Backbone.localStorage
• pyronicide/backbone.couchdb.js
Thursday, August 8, 13
22. 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
Thursday, August 8, 13
23. 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
Thursday, August 8, 13
24. Handle Model Events
class TodoShow extends Backbone.View
initialize: ->
# new methods in 1.0.0
# pay attention to events cycle
@listenTo @model, 'change', @render
...
Thursday, August 8, 13
25. Handle DOM Events
• events attribute
• {"event selector": "callback"}
Thursday, August 8, 13
28. 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})
Thursday, August 8, 13
33. Marionette
• Application library based on Backbone
• Scale for large JavaScript applications
• Collection of common design, good
patterns and best practices
Thursday, August 8, 13