BackboneJs

  • 1,896 views
Uploaded on

 

More in: Technology , Sports
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,896
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
50
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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