Backbone.js: MVC framework for Javascript – Routers

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.