This document provides an introduction to Backbone including what it covers, JavaScript and jQuery basics, what Backbone is, why and when to use Backbone, and the basics of Backbone models, views, collections, and routers. It discusses key concepts like model-view separation, events, properties, and methods in Backbone.

1. Backbone Introduction
Ravi Hamsa

2. What is covered
Bits of JavaScript
Bits of JQuery
Backbone What, Why, When
Backbone Basics
Model
View
Collection
Routers
_ (did you see that?)

3. JavaScript
Dynamic Language (danger)
String, Number, Boolean, undefined, null
Object, Array, Function
Date, Math, Etc
Literals passed by value, every thing else passed by
reference (you cannot change it)
Prototype inheritance (doesn’t copy, just reference)
Closures (memory leaks)

4. JQuery
Traversing DOM
$
find
closest
DOM Manipulation
$(‘<div> </div>’)
append
appendTo
Custom Events

5. What is Backbone
Model View Collection framework
Has dependency on JQuery (>=1.7.0) and underscore
(>=1.5.0)
Annotated Source
http://backbonejs.org/docs/backbone.html

6. Why Backbone
Model and View separation
Simple framework
Maximum flexibility and scalability
Provides simple interface to define and extend Model,
View and Collections
Very high adoption
Active community

7. When Backbone
using Ajax?
copy-pasting your JavaScript code
Restful web application
Single Page web applications
Any data/event driven web application

8. Backbone Model
- store data
- emmit events on attibute change
- toJSON() give data state of the model
- set('attributeName', attributeValue);
- get('attributeName')
- set({attributeName:attributeValue});

9. Backbone Model
Events
all
change
change:attribute
Properties
collection
defaults
idAttribute

10. Backbone View
Properties
model
collection
tagName
className
el
$el (jquery el)
Methods
initialize
this.$
render

11. Backbone Collection
Methods
add( array of Objects );
get(model Id)
at(index)
reset()
reset(array of Objects)
Events
add
remove
reset
all
change:modelAttribute

12. Backbone Router