BackboneJs
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

BackboneJs

on

  • 2,387 views

 

Statistics

Views

Total Views
2,387
Views on SlideShare
2,386
Embed Views
1

Actions

Likes
4
Downloads
50
Comments
0

1 Embed 1

https://duckduckgo.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

BackboneJs Presentation 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?