Introduction to backbone js
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Introduction to backbone js

  • 773 views
Uploaded 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.

More in: Technology
  • 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
773
On Slideshare
773
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
13
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