Backbone introduction

647 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
647
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Backbone introduction

  1. 1. Backbone Introduction Ravi Hamsa
  2. 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. 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. 4. JQuery Traversing DOM $ find closest DOM Manipulation $(‘<div> </div>’) append appendTo Custom Events
  5. 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. 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. 7. When Backbone using Ajax? copy-pasting your JavaScript code Restful web application Single Page web applications Any data/event driven web application
  8. 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. 9. Backbone Model Events all change change:attribute Properties collection defaults idAttribute
  10. 10. Backbone View Properties model collection tagName className el $el (jquery el) Methods initialize this.$ render
  11. 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. 12. Backbone Router

×