Your SlideShare is downloading. ×
0
Introduction to backbone js
Introduction to backbone js
Introduction to backbone js
Introduction to backbone js
Introduction to backbone js
Introduction to backbone js
Introduction to backbone js
Introduction to backbone js
Introduction to backbone js
Introduction to backbone js
Introduction to backbone js
Introduction to backbone js
Introduction to backbone js
Introduction to backbone js
Introduction to backbone js
Introduction to backbone js
Introduction to backbone js
Introduction to backbone js
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduction to backbone js

518

Published on

This gives a jump start to Backbone.js. The session would cover various topics like Introduction to backbone js / Why would you use Backbone js? / Dependencies for Backbone js. and Getting started …

This gives a jump start to Backbone.js. The session would cover various topics like Introduction to backbone js / Why would you use Backbone js? / Dependencies for Backbone js. and Getting started with backbone MVC etc.

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

No Downloads
Views
Total Views
518
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
16
Comments
0
Likes
2
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. Introduction to Backbone js Presenter: Debasish Mohanty, Mindfire Solutions Date: 12/05/2013
  • 2. Presenter: Debasish Mohanty, Mindfire Solutions Agenda What, Why and who Dependencies of Backbone Getting started(Backbone setup and Hello World exp) Backbone MVC(Models, Views , Collections) Models and Collections Views Routers Events
  • 3. Presenter: Debasish Mohanty, Mindfire Solutions
  • 4. Presenter: Debasish Mohanty, Mindfire Solutions What - Backbone js is a Model, view, collection framework. - Javascript for building richer client side application. - Data driven.
  • 5. Presenter: Debasish Mohanty, Mindfire Solutions Why - Structure - Reuse - Separation of roles of concerns
  • 6. Presenter: Debasish Mohanty, Mindfire Solutions Who
  • 7. Presenter: Debasish Mohanty, Mindfire Solutions Controller Model View MVC
  • 8. Presenter: Debasish Mohanty, Mindfire Solutions Adding Backbone //Jquery <script src="/jquery.min.js" type="text/javascript"></script> //Underscore <script src="underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script> //backbone <script src="backbone-min.js" type="text/javascript"></script>
  • 9. Presenter: Debasish Mohanty, Mindfire Solutions Model - Data behind the application - object or entity. - provides a basic set of functionality for managing changes.
  • 10. Presenter: Debasish Mohanty, Mindfire Solutions Define Person = Backbone.Model.extend(); First Person = new Person({ Name: 'Lincoln' })
  • 11. Collections -Ordered set of Models - Model: Student, Collection: ClassStudents - Model: Todo Item, Collection: Todo List - Model: Animal, Collection: Zoo Presenter: Debasish Mohanty, Mindfire Solutions
  • 12. Define Person = Backbone.Model.extend(); Persons = Backbone.Collection.extend({ Model: Person, url: '#' }) Presenter: Debasish Mohanty, Mindfire Solutions
  • 13. Presenter: Debasish Mohanty, Mindfire Solutions View - reflect what your applications' data models look like. - listen to events and react accordingly. Define AppView = Backbone.View.extend({ })
  • 14. Presenter: Debasish Mohanty, Mindfire Solutions render AppView = backbone.View.extend({ render: function() { this.$el.append('Hello World'); return this; } });
  • 15. Presenter: Debasish Mohanty, Mindfire Solutions Router - way of maintaining state of the application - routes interpret anything after "#" tag in the URL define var AppRouter = Backbone.Router.extend({ routes: { "": "defaultRoute" } }); var app_router = new AppRouter; app_router.on('route:defaultRoute', function(actions) { alert(actions); }) // Start Backbone history a necessary step for bookmarkable URL's Backbone.history.start();
  • 16. Presenter: Debasish Mohanty, Mindfire Solutions events AppView = Backbone.View.extend({ Events { “click #addBtn”: “add” ... }, add: function(e) { Alert('added'); } })
  • 17. Presenter: Debasish Mohanty, Mindfire Solutions Question and Answer
  • 18. Presenter: Debasish Mohanty, Mindfire Solutions Thank you

×