In the previous post, we saw Models of Backbone. We will see about Router in this post.
Router provides method for routing client side pages. Pages using REST API have multiple views on one page and are displayed as a result of some action. Like you have one view of login and other of home page. So when you login the view of the page changes and it displays your home page. Router helps to keep url tidy and makes easy to perform action accordingly. Lets take a look at example.
A normal web application.
URL for signup page: http://example.com/signup.php
URL for home page: http://example.com/home.php?u=1234
Single page web application.
URL for signup page: http://example.com#/singup
URL for home page: http://example.com#/home/1234
Requirement: Backbone.js (+Underscore.js), jquery.js (latest)
Using:
Contents of router.js
//Router is created using Router of Backbone.
var route = Backbone.Router.extend({
//initialize is called when we will create a route object. pageview is the view of the page which will be created in next post
initialize: function(pageview){
//We store the views so that it is not called everytime the url changes.
this.view = pageview;
},
//routes are the link with respect to the default url, we want to implement.
routes:{
'loginpage': 'loginpage', //http://yourwebsiteurl/#/loginpage
'loginuser/:email': 'loginuser', //:email is the variable which is analogous to get method, which backbone matches by itself.
'': 'index' //http://yourwebsiteurl/
},
loginpage: function(){
//Whenever we land on the url using loginpage its view must be called.
this.view.loginpageview();
},
loginuser: function(email){ // matched :email from url can be taken in variable(like email in our case) in this function.
//Whenever we land on the url using loginuser its view must be called. We can store multiple views and call them as required.
this.view.loginuserview(email);
},
index: function(){
//by default this is called as we have marked.
this.view.render();
}
});
Explanation:
Everything is explained in comments. We will use this router.js in our next post on views.
I Wonder 