0
Agenda By Jeremy Ashkenas SBR Department
Lightweight <ul><li>< 1200 Lines of code </li></ul><ul><li>No UI Widgets </li></ul><ul><li>Pre-requisites ( HTML , Css  an...
Backbone.Model What do they do? <ul><li>Store Data </li></ul><ul><li>Fire Events when data is changed </li></ul><ul><li>Pr...
eg:Model <ul><li>GridModel  =  Backbone.Model.extend(); </li></ul><ul><li>Or </li></ul><ul><li>GridModel  =  Backbone.Mode...
Backbone.View What do they do? <ul><li>Display data </li></ul><ul><li>Render data with template </li></ul><ul><li>Respond ...
eg:View <ul><li>GridView  =  Backbone.View.extend({ </li></ul><ul><li>initialize:function(){ </li></ul><ul><li>  _.bindAll...
Backbone.Collection What do they do? <ul><li>Listen to&quot;add&quot; and &quot;remove&quot; events </li></ul><ul><li>Fetc...
Eg: Collection <ul><li>var GridModels  =  Backbone.Collection.extend({ </li></ul><ul><li>model:gridModel </li></ul><ul><li...
Backbone.Router What do they do? <ul><li>Routing the applications URL's when using hash tags(#). </li></ul><ul><li>Manage ...
Extras <ul><li>Sinon.JS </li></ul>
Trends Support
Resources <ul><li>Official url for Backbone Js </li></ul><ul><li>http://documentcloud.github.com/backbone/ </li></ul>
Any questions?
Upcoming SlideShare
Loading in...5
×

BackboneJs

1,955

Published on

Published in: Technology, Sports
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,955
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
54
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "BackboneJs"

  1. 1. Agenda By Jeremy Ashkenas SBR Department
  2. 2. Lightweight <ul><li>< 1200 Lines of code </li></ul><ul><li>No UI Widgets </li></ul><ul><li>Pre-requisites ( HTML , Css and Basic JavaScript) </li></ul><ul><li>Use Jquery and underscorejs Internally </li></ul>
  3. 3. Backbone.Model What do they do? <ul><li>Store Data </li></ul><ul><li>Fire Events when data is changed </li></ul><ul><li>Provide get/set Accessors </li></ul><ul><li>Does the data persistance ( save method ) </li></ul>
  4. 4. eg:Model <ul><li>GridModel = Backbone.Model.extend(); </li></ul><ul><li>Or </li></ul><ul><li>GridModel = Backbone.Model.extend({ </li></ul><ul><li>defaults:{ </li></ul><ul><li>} </li></ul><ul><li>}); </li></ul><ul><li>var gridModel = new GridModel(); </li></ul><ul><li>gridModel. get (“key”); // only one level </li></ul><ul><li>gridModel. set ({“key”:”value”}); //does the writing </li></ul>
  5. 5. Backbone.View What do they do? <ul><li>Display data </li></ul><ul><li>Render data with template </li></ul><ul><li>Respond to model data changes </li></ul><ul><li>Act on user input entries </li></ul>
  6. 6. eg:View <ul><li>GridView = Backbone.View.extend({ </li></ul><ul><li>initialize:function(){ </li></ul><ul><li> _.bindAll(this, 'render','remove'); </li></ul><ul><li>this.template = _.template( $(“#grid-template”).html()); </li></ul><ul><li>}, </li></ul><ul><li>render:function(){ </li></ul><ul><li>var rc = this.template( this.model.toJSON()); </li></ul><ul><li>$(this.el).html( rc ); </li></ul><ul><li>return this; </li></ul><ul><li>} </li></ul><ul><li>}); </li></ul><ul><li>var gridView = new GridView( {model:gridModel}); </li></ul>
  7. 7. Backbone.Collection What do they do? <ul><li>Listen to&quot;add&quot; and &quot;remove&quot; events </li></ul><ul><li>Fetch data model from server </li></ul><ul><li>Act on user input entries </li></ul>
  8. 8. Eg: Collection <ul><li>var GridModels = Backbone.Collection.extend({ </li></ul><ul><li>model:gridModel </li></ul><ul><li>}); </li></ul>
  9. 9. Backbone.Router What do they do? <ul><li>Routing the applications URL's when using hash tags(#). </li></ul><ul><li>Manage history </li></ul>
  10. 10. Extras <ul><li>Sinon.JS </li></ul>
  11. 11. Trends Support
  12. 12. Resources <ul><li>Official url for Backbone Js </li></ul><ul><li>http://documentcloud.github.com/backbone/ </li></ul>
  13. 13. Any questions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×