Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

1. Malti Yadav
Software Consultant
malti@knoldus.com

2. Quick Overview
An Introduction to Backbone.jsAn Introduction to Backbone.js
Getting Object-OrientedGetting Object-Oriented
Backbone Models & ViewBackbone Models & View
Interacting with serverInteracting with server
Backbone CollectionsBackbone Collections
Backbone RoutingBackbone Routing

3. Quick Overview
An Introduction to Backbone.jsAn Introduction to Backbone.js
Getting Object-OrientedGetting Object-Oriented
Backbone Models & ViewBackbone Models & View
Interacting with serverInteracting with server
Backbone CollectionsBackbone Collections
Backbone RoutingBackbone Routing

4. Backbone was created by Jeremy Ashkenas in 2010Jeremy Ashkenas in 2010, who also wrote
CoffeeScript .
Backbone has been considered one of the leading libraries available that
enables the creation of single-page web applications.
Backbone.js gives structure to web applications by providing modelsmodels
with key-value binding and custom events, collections with a rich API of
functions, views with declarative event handling, and connects it all to
your existing API over a RESTful JSON interface.

5. Why need backbone js ?
Building single-page web apps or complicated user interfaces will get
extremely difficult by simply using jQuery .
Backbone.js enforces that communication to the server should be done
entirely through a RESTful API.

6. Quick Overview
An Introduction to Backbone.jsAn Introduction to Backbone.js
Getting Object-OrientedGetting Object-Oriented
Backbone Models & ViewBackbone Models & View
Interacting with serverInteracting with server
Backbone CollectionsBackbone Collections
Backbone RoutingBackbone Routing

7. Object-Oriented
An object is a representation of something in your problem domain that
contains a number of attributes. The classic example of an object is a
person.
In your code, you’ll want to refer to different attributes of person, such
as their name, age, and gender.

8. Benifits to using Object-Oriented
Modularity
Encapsulation
Reuse

9. Quick Overview
An Introduction to Backbone.jsAn Introduction to Backbone.js
Getting Object-OrientedGetting Object-Oriented
Backbone Models & ViewBackbone Models & View
Interacting with serverInteracting with server
Backbone CollectionsBackbone Collections

10. Models & Views

11. Cont...
ModelModel
Data and business logic.
Loads and saves from the
server.
Emits events when data
changes.
ViewView
Listens for changes and renders
UI.
Handles user input and
interactivity.
Sends captured input to the
model.

12. Creating model
Person = Backbone.Model.extend({
initialize: function(){
alert("Welcome to this world");
}
});
var person = new Person;

13. Setting model attribute
We can pass some parameters when we create an instance of our model.
Person = Backbone.Model.extend({
initialize: function(){
alert("Welcome to this world");
}
});
var person = new Person({ name: "Thomas", age: 67});

14. Cont...
var person = new Person();
person.set({ name: "Thomas", age: 67});

15. Getting model attribute
var person = new Person({ name: "Thomas", age: 67,
child: 'Ryan'});
var age = person.get("age"); // 67
var name = person.get("name"); // "Thomas"
var child = person.get("child"); // 'Ryan'

16. Setting default model attribute
Person = Backbone.Model.extend({
defaults: {
name: 'Fetus',
age: 0,
child: ''
},
initialize: function(){
alert("Welcome to this world");
}
});
var person = new Person({ name: "Thomas", age: 67, child:
'Ryan'});
var age = person.get("age"); // 67
var name = person.get("name"); // "Thomas"
var child = person.get("child"); // 'Ryan'

17. Listening for changes to the model
Person = Backbone.Model.extend({
defaults: {
name: 'Fetus',
age: 0
},
initialize: function(){
alert("Welcome to this world");
this.on("change:name", function(model){
var name = model.get("name");
alert("Changed my name to " + name );
});
}
});
var person = new Person({ name: "Thomas", age: 67});
person.set({name: 'Stewie Griffin'});

18. Quick Overview
An Introduction to Backbone.jsAn Introduction to Backbone.js
Getting Object-OrientedGetting Object-Oriented
Backbone Models & ViewBackbone Models & View
Interacting with serverInteracting with server
Backbone CollectionsBackbone Collections
Backbone RoutingBackbone Routing

19. Interacting with the server
var UserModel = Backbone.Model.extend({
urlRoot: '/user',
defaults: {
name: '',
email: ''
}
});

20. Cont...
var user = new UserModel();
var userDetails = {
name: 'Thomas',
email: 'thomasalwyndavis@gmail.com'
};
user.save(userDetails, {
success: function (user) {
alert(user.toJSON());
}
})
//POST /user
Creating a model

21. Cont...
var user = new Usermodel({id: 1});
user.fetch({
success: function (user) {
alert(user.toJSON());
}
})
//GET /user/1
Getting a model

22. Cont...
var user = new Usermodel({
id: 1,
name: 'Thomas',
email: 'thomasalwyndavis@gmail.com'
});
// PUT /user/1
user.save({name: 'Davis'}, {
success: function (model) {
alert(user.toJSON());
}
});
Updating a model

23. Cont...
var user = new Usermodel({
id: 1,
name: 'Thomas',
email: 'thomasalwyndavis@gmail.com'
});
// DELETE /user/1
user.destroy({
success: function (model) {
alert(user.toJSON());
}
});
Deleting a model

24. View
Organise code into logical view
Listen events and react accordingly
listen for changes in the model and render the changes on designated
section of HTML page.

25. Cont...
SearchView = Backbone.View.extend({
initialize: function(){
alert("Alerts somethings here.");
}
});
var search_view = new SearchView();

26. Cont...
SearchView = Backbone.View.extend({
initialize: function(){
alert("Alerts suck.");
}
});
var search_view = new SearchView({ el: $
("#search_container") });
Instance with elements

27. Listening for events
SearchView = Backbone.View.extend({
initialize: function(){
this.render();
},
render: function(){
var template = _.template( $("#search_template").html(),
{} );
this.$el.html( template );
},
events: {
"click input[type=button]": "doSearch"
},
doSearch: function( event ){
alert( "Search for " + $("#search_input").val() );
}
});

28. Quick Overview
An Introduction to Backbone.jsAn Introduction to Backbone.js
Getting Object-OrientedGetting Object-Oriented
Backbone Models & ViewBackbone Models & View
Interacting with serverInteracting with server
Backbone CollectionsBackbone Collections
Backbone RoutingBackbone Routing

29. Collections

30. Cont...
Backbone collections are simply an ordered set of models .
• Model: Student, Collection: ClassStudents
• Model: Song, Collection: Album
• Model: Animals, Collection: Zoo

31. Cont...
var Song = Backbone.Model.extend({
initialize: function(){
console.log("Music is the answer");
}
});
var Album = Backbone.Collection.extend({
model: Song
});

32. Cont...
var song1 = new Song({ name: "How Bizarre", artist: "OMC" });
var song2 = new Song({ name: "Talk It Over In Bed", artist: "OMC" });
var myAlbum = new Album([ song1, song2]);
console.log( myAlbum.models ); // [song1, song2]

33. Quick Overview
An Introduction to Backbone.jsAn Introduction to Backbone.js
Getting Object-OrientedGetting Object-Oriented
Backbone Models & ViewBackbone Models & View
Interacting with serverInteracting with server
Backbone CollectionsBackbone Collections
Backbone RoutingBackbone Routing

34. Routing
Backbone routers are used for routing your applications URL's when using
hash tags(#).
var AppRouter = Backbone.Router.extend({
routes: {
"*actions": "defaultRoute"
// matches http://example.com/#anything-here
}
});

35. Cont...
var app_router = new AppRouter;
app_router.on('route:defaultRoute', function(actions) {
alert(actions);
})
Backbone.history.start();

36. Dynamic Routing
var AppRouter = Backbone.Router.extend({
routes: {
"posts/:id": "getPost"
}
});
var app_router = new AppRouter;
app_router.on('route:getPost', function (id) {
alert( "Get post number " + id );
});

37. THANK YOU