Introduction
This chapter demonstrates about the Backbone.js Router which Is used to routing the client side applications and connecting them to actionsand events and following are the concepts are covered in this chapter.
- Router
Description
Backbone.js Router is used for the purpous of routing client-side applications and connecting them to events and actions. It additionally defines the URL representation of such application?s object if web applications give some bookmarkable, linkable, and shareable URL. The table below demonstrates the list of methods used to manipulate the Backbone.js router.
Router.extend()
Router.extend method() is used to extend the router class along with user can create new constructor inherited from the Backbone.A router which defines some triggered actions when specific URL fragments are matched and which provides routes for those actions the syntax below demonstrates the Router.extend().
[code]
Backbone.Router.extend(properties, classProperties)
[/code]
Parameters
The code below demonstrates the Router.extend() as shown below.
[html]
<!DOCTYPE html>
<head>
<title>Router Extend Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
<script type="text/javascript">
var RouteMenu = Backbone.View.extend({
el: '#routemenu',
events: {
'click a' : 'onClick'
},
onClick: function( e ) {
router.navigate('/');
}
});
var Router = Backbone.Router.extend({
routes: {
'route/:id' : 'defaultRoute'
},
});
var routemenu = new RouteMenu();
Backbone.history.start();
</script>
</head>
<body>
<section id="routemenu">
<ul>
<li> <a href="#/route/1">Route no.1 </a> </li>
<li> <a href="#/route/2">Route no. 2 </a> </li>
<li> <a href="#/route/3">Route no. 3 </a> </li>
</ul>
</section>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Router.routes()
Backbone.js routes method is used to demonstrates the URL representation of application object on routers which is also consist of incoming route value from the URL and syntax for the Backbone.js routes() as shown below.
[code]
router.routes
[/code]
[/alertmessages]
The code below demonstrates the Router.routes() as shown below.
[html]
<!DOCTYPE html>
<head>
<title>Router Routes Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
var Router = Backbone.Router.extend({
routes: {
'': 'myroute_1',
'myroute_2': 'myroute_2'
},
myroute_1: function(){
document.write("myroute_1 has been called.");
},
myroute_2: function(){
document.write("myroute_2 has been called.");
},
});
var appRouter=new Router;
Backbone.history.start();
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Router.Constructor()
Backbone.js constructor or initialize method is used to create a new constructor for the router installation. The syntax below demonstrates the Router.Constructor().
[code]
new Router(options)
[/code]
Parameters
The code below demonstrates the Router.constructor() as shown below.
[html]
<!DOCTYPE html>
<head>
<title>Router Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
var Router = Backbone.Router.extend({
routes: {
'': 'route_1',
'route_2': 'route_2'
},
route_1: function(){
document.write("route one has been called.");
},
route_2: function(){
document.write("route two has been called.");
},
});
var appRouter=new Router;
Backbone.history.start();
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Router.route()
By using Router.route method user can create the route to the router which may be regular expression or routing string which appends the router parameters by using slash followed by colons and parameters name and the syntax below demonstrates the router.route().
[code]
router.route(route, name, [callback])
[/code]
Parameters
The code below demonstrates the Router.route() as shown below.
[html]
<!DOCTYPE html>
<head>
<title>Router Route Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
var RouteMenu = Backbone.View.extend({
el: '#routemenu',
events: {
'click a' : 'onClick'
},
onClick: function( e ) {
router.navigate('/');
}
});
var Router = Backbone.Router.extend({
routes: {
'route/:id' : 'defaultRoute'
},
});
var routemenu = new RouteMenu();
Backbone.history.start();
</script>
<body>
<section id="routemenu">
<ul>
<li> <a href="#/route/1">route 1 </a> </li>
<li> <a href="#/route/2">route 2 </a> </li>
<li> <a href="#/route/3">route 3 </a> </li>
</ul>
</section>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Router.navigate()
Backbone.js navigate method is used to update and save the application as URL which can be done by calling the route function the syntax below demonstrates the router.navigate()
[code]
router.navigate(fragment, [options])
[/code]
Parameters
The code below demonstrates the Router.navigate() as shown below.
[html]
<!DOCTYPE html>
<head>
<title>Router Navigate Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
var RouteMenu = Backbone.View.extend({
el: '#routemenu',
events: {
'click a' : 'onClick'
},
onClick: function( e ) {
router.navigate('/');
}
});
var Router = Backbone.Router.extend({
routes: {
'route/:id' : 'defaultRoute'
},
});
var routemenu = new RouteMenu();
Backbone.history.start();
</script>
<body>
It refers to the view class 'RouteMenu' and creates the 3 links which changes the url when you click on the links
<section id="routemenu">
<ul>
<li> <a href="#/route/1">route 1 </a> </li>
<li> <a href="#/route/2">route 2 </a> </li>
<li> <a href="#/route/3">route 3 </a> </li>
</ul>
</section>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Router.execute()
Router.execute() method is called internally in a router if router matches its corresponding call back. The syntax below demonstrates the router.execute().
[code]
router.execute(callback, args)
[/code]
Parameters
The code below demonstrates the Router.execute() as shown below.
[html]
<!DOCTYPE html>
<head>
<title>Router Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
var Route1 = Backbone.View.extend({
template: '<b>This is route 1</b>',
initialize: function () {
this.execute();
},
execute: function () {
this.$el.html(this.template);
}
});
var Route2 = Backbone.View.extend({
template: '<b>This is route 2</b>',
initialize: function () {
this.execute();
},
execute: function () {
this.$el.html(this.template);
}
});
var AppRouter = Backbone.Router.extend({
routes: {
'': 'homeRoute',
'route/1': 'homeRoute',
'route/2': 'aboutRoute',
},
homeRoute: function () {
var route1 = new Route1();
$("#content").html(route1.el);
},
aboutRoute: function () {
var route2 = new Route2();
$("#content").html(route2.el);
}
});
var appRouter = new AppRouter();
Backbone.history.start();
</script>
<body>
<div id="navigation">
<a href="#/route/1">route1</a>
<a href="#/route/2">route2</a>
</div>
<div id="content"></div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
| method | Description |
|---|---|
| extend | Which is used to extend the backbones router class. |
| routes | Which are used to define the URL representation of applications object. |
| initialize | Which create a new constructor for router installation. |
| route | which create route for the router. |
| navigate | Which update URL in the applications. |
| execute | Which is used when a route matches its corresponding call back. |
- properties Which specifies the instance property for the router class.
- classProperties Which specifies class property which are attached to the router construction function.
- properties Which specifies the instance property for the router class.
- route Which specifies routing string or regular expression.
- name Which specifies the name of the router parameter.
- callback Which specify the name of the router if a call back argument is omitted.
- fragment Which specifies the name of the parameter in which URL will be displayed.
- options Is used to specify the options such as trigger and replace to call the route function .
- callback Is get into action when matched with the route.
- args Which specifies the arguments which are passed within execute method.
Key Points
- Router is used for routing client side application.
- URL representation of application will be defined by Router