Introduction to Backbone.Js
Post on 24-Feb-2016
113 Views
Preview:
DESCRIPTION
Transcript
INTRODUCTION TO BACKBONE.JS
Sayed AhmedComputer Engineering, BUET, Bangladesh (Graduated on 2001) (1996 - 2001)MSc in Computer Science, U of Manitoba, Canada
Linkedin: linkedin.com/in/sayedjustetcPersonal: http://sayed.justetc.netEmail: sayed@justetc.net
I do not know everything about Backbone.js
But Backbone.Js is not Rocket Science
SOME TOP JAVASCRIPT FRAMEWORKS Some JavaScript Frameworks
http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/
JavaScript MVC Frameworks http://todomvc.com/
WHY BACKBONE.JS? Why BackBone.js
single page applications are the future
Esp for mobile, tablet, and similar devices And such devices are pushing the trend http://happyworm.com/blog/2010/08/23/th
e-future-of-web-apps-single-page-applications/
http://singlepageappbook.com/goal.html http://venturebeat.com/2013/11/08/the-
future-of-web-apps-is-ready-isomorphic-javascript/
WHY BACKBONE Why Backbone
enforces that communication to the server should be done entirely through a RESTful API
The web is trending such that all data/content will be exposed through an API
Why? browsers are no longer the only clients Other clients such as mobile devices, tablet devices,
Google Goggles and electronic fridges etc. are increasing very rapidly
BENEFITS OF BACKBONE Benefits of Backbone
incredibly small library Provide a significant amount of functionality
and structure Essentially an MVC for the client Allows you to make your code modular
MODELS IN BACKBONE.JS Models in Backbone.js
According to Backbone.js Team Models are
the heart of any JavaScript application, containing
the interactive data as well as a large part of the logic surrounding it:
conversions, validations, computed properties, and access control.
MODELS IN BACKBONE.JS Person = Backbone.Model.extend({
initialize: function(){ alert("Welcome to this world");
} }); var person = new Person;
SETTING ATTRIBUTES IN MODEL Person = Backbone.Model.extend({
initialize: function(){ alert("Welcome to this world");
} });
var person = new Person({ name: "Thomas", age: 67
}); // or we can set afterwards, these operations are equivalent var person = new Person(); person.set({ name: "Thomas", age: 67});
GETTING/RETRIEVING ATTRIBUTES var age = person.get("age"); // 67 var name = person.get("name"); //
"Thomas“ var child = person.get("child"); //
'Ryan'
SETTING MODEL DEFAULTS
Person = Backbone.Model.extend({ defaults: {
name: 'Fetus', age: 0, child: ''
}, initialize: function(){
alert("Welcome to this world"); }
});
SETTING MODEL DEFAULTS 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'
MANIPULATING MODEL ATTRIBUTES
Person = Backbone.Model.extend({ defaults: {
name: 'Fetus', age: 0, child: ''
}, initialize: function(){
alert("Welcome to this world"); }, adopt: function( newChildsName ){
this.set({ child: newChildsName }); }
});
MANIPULATING MODEL ATTRIBUTES
var person = new Person({ name: "Thomas", age: 67, child: 'Ryan‘
}); person.adopt('John Resig'); var child = person.get("child"); // 'John
Resig'
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"); // 'Stewie Griffin' alert("Changed my name to " + name );
}); }
});
INTERACTING WITH THE SERVER Notice:
urlRoot: '/user‘ Assume: The server has implemented a RESTful
URL /user which allows us to interact with it Assume there is a user table in the DB side /user url interacts with the user table
var UserModel = Backbone.Model.extend({ urlRoot: '/user',
defaults: { name: '', email: '' } });
CREATING A NEW MODEL
GETTING/RETRIEVING A MODEL (I.E USER) // Here we have set the `id` of the model var
user = new Usermodel({id: 1}); // The fetch below will perform
In the url: [GET] /user/1 // The server should return the id, name and
email from the database user.fetch({
success: function (user) { alert(user.toJSON()); }
})
UPDATING A MODEL
DELETING A MODEL
GET ALL THE CURRENT ATTRIBUTES var person = new Person({ name: "Thomas", age: 67}); var attributes = person.toJSON(); // { name: "Thomas",
age: 67} /* This simply returns a copy of the current attributes. */ var attributes = person.attributes; /* The line above gives a direct reference to the
attributes and you should be careful when playing with it. Best practise would suggest that you use .set() to edit attributes of a model to take advantage of backbone listeners. */
VALIDATE DATA BEFORE YOU SET OR SAVE IT
VIEW IN BACKBONE.JS Backbone views
are used to reflect what your applications' data models look like
They are also used to listen to events and react accordingly.
Our Focus on Views view functionality and how to use views with a JavaScript templating
library, specifically Underscore.js's _.template.
VIEWS IN BACKBONE var search_view = new SearchView({ el: $("#search_container") }); With el, backbone view becomes the owner of the
div#search_container
LOADING/RENDERING A TEMPLATE
The Template
RENDER VIEW USING THE TEMPLATE
LISTENING FOR EVENTS
USING TEMPLATE VARIABLES
USING TEMPLATE VARIABLES
ROUTERS IN BACKBONE Backbone routers are used for routing
your applications URL's when using hash tags(#).
ROUTERS IN BACKBONE
DYNAMIC ROUTING
DYNAMIC ROUTING CONT. ":PARAMS" AND "*SPLATS"
COLLECTIONS IN BACKBONE Backbone collections are simply an
ordered set of models
COLLECTIONS IN BACKBONE
top related