backbone js
TRANSCRIPT
Malti YadavSoftware [email protected]
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
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
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.
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.
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
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.
Benifits to using Object-Oriented
Modularity
Encapsulation
Reuse
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
Models & Views
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.
Creating model
Person = Backbone.Model.extend({ initialize: function(){ alert("Welcome to this world"); }});
var person = new Person;
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});
Cont...
var person = new Person();person.set({ name: "Thomas", age: 67});
Getting model attribute
var person = new Person({ name: "Thomas", age: 67, child: 'Ryan'});
var age = person.get("age"); // 67var name = person.get("name"); // "Thomas"var child = person.get("child"); // 'Ryan'
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"); // 67var name = person.get("name"); // "Thomas"var child = person.get("child"); // 'Ryan'
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'});
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
Interacting with the server
var UserModel = Backbone.Model.extend({ urlRoot: '/user', defaults: { name: '', email: '' }
});
Cont...
var user = new UserModel();var userDetails = { name: 'Thomas', email: '[email protected]'};
user.save(userDetails, { success: function (user) { alert(user.toJSON()); }})
//POST /user
Creating a model
Cont...
var user = new Usermodel({id: 1});
user.fetch({ success: function (user) { alert(user.toJSON()); }})
//GET /user/1
Getting a model
Cont...
var user = new Usermodel({ id: 1, name: 'Thomas', email: '[email protected]'});
// PUT /user/1 user.save({name: 'Davis'}, { success: function (model) { alert(user.toJSON()); }});
Updating a model
Cont...
var user = new Usermodel({ id: 1, name: 'Thomas', email: '[email protected]'});
// DELETE /user/1 user.destroy({ success: function (model) { alert(user.toJSON()); }});
Deleting a model
View
Organise code into logical view
Listen events and react accordingly
listen for changes in the model and render the changes on designatedsection of HTML page.
Cont...
SearchView = Backbone.View.extend({ initialize: function(){ alert("Alerts somethings here."); }});
var search_view = new SearchView();
Cont...
SearchView = Backbone.View.extend({ initialize: function(){ alert("Alerts suck."); }});
var search_view = new SearchView({ el: $("#search_container") });
Instance with elements
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() ); }});
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
Collections
Cont...
Backbone collections are simply an ordered set of models .
• Model: Student, Collection: ClassStudents• Model: Song, Collection: Album• Model: Animals, Collection: Zoo
Cont...
var Song = Backbone.Model.extend({ initialize: function(){ console.log("Music is the answer"); }});
var Album = Backbone.Collection.extend({ model: Song});
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]
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
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 }});
Cont...
var app_router = new AppRouter;
app_router.on('route:defaultRoute', function(actions) { alert(actions);})
Backbone.history.start();
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 ); });
THANK YOU