Backbonejs on Rails
-
Upload
luis-porras -
Category
Technology
-
view
1.059 -
download
0
Transcript of Backbonejs on Rails
Developing Backbone.js Applications with RailsBACKBONE.JS ON RAILS
Luis Alfredo Porras PaezRails Developer@lporras16
Give your JS App some Backbone with Models,Views, Collections, and Events
“Get yor truth out of the DOM”- Jeremy Ashkenas
SIMPLE SMALL LIBRARY
OPEN SOURCE
LIGHTWEIGHT
- Easy to read in an hour or two
- Focused functionality
- No UI widgets
- Template agnostic
- Use the HTML & CSS you already know
Underscore.js
Backbone's only hard dependency. http://underscorejs.org
JSON2.js
Needed if you'd like to parse and serialize JSON in older browsers (read: "Internet Explorer") https://github.com/douglascrockford/JSON-js
jQuery
Recommended for DOM manipulation and Ajax. http://jquery.com
Zepto
Recommended as a jQuery alternative for mobile apps http://zeptojs.com
DEPENDENCIES
MODEL
WHAT DO THEY DO?
- Store data
- Provide get/set accessors
- Fire events when modified
- Optionally make REST calls to a server for persistence
Backbone.Model: Definition and get/set attributes
Backbone.Model: Sync with API
Backbone.Model: Default Values
Backbone.Model: Built-in Events
Backbone.Model: Extend Models
Backbone.Model: Some Useful Methods
Backbone.Model: Parse Response
VIEW
WHAT DO THEY DO?
- Display data & UI controls
- Render data with a template
- React to model changes - Act on use input
Backbone.View: Fixing the EL
Backbone.View: Template Engines
...
Backbone.View: View Events
Backbone.View: View Events
If you are using JQuery:
Backbone.View: Model Changes
COLLECTION
WHAT DO THEY DO?
Fecth model DataAdd to existing setRemove from set
Your custom query codeProvide useful suite of underscore.js methods
Backbone.Collection
Backbone.Collection: Getting Data from Server
Backbone.Collection: Events
Backbone.Collection
forEach (each)
map
reduce (foldl, inject)
reduceRight (foldr)
find (detect)
filter (select)
reject
every (all)
some (any)
include
invoke
max
min
sortBy
groupBy
sortedIndex
shuffle
toArray
size
first
initial
rest
last
without
indexOf
lastIndexOf
isEmpty
chain
Backbone.Collection
ROUTERS
WHAT DO THEY DO?
- Map url fragments into methods
- Hash fragments (#page), PushState
(optional)
Backbone.Router
Backbone.Router: More route Matches
Backbone.Router: PushState
Backbone.Router: Defining Router
rails-backbone
Working with Rails
Backbone.js was originally extracted from a Rails application; getting your client-side (Backbone) Models to sync correctly with your server-side (Rails) Models is painless, but there are still a few things to be aware of.
By default, Rails adds an extra layer of wrapping around the JSON representation of models. You can disable this wrapping by setting:
ActiveRecord::Base.include_root_in_json = false
RESOURCES
Homepage http://documentcloud.github.com/backbone/
Tutorials, blog posts and example sites
Projects and Companies using Backbone
Extensions, Plugins, Resources
Contributing to Backbone