Backbone.js routes Router
Last Updated :
22 Aug, 2022
The Backbone.js routes Router is used for mapping URLs with the parameters of the function of router. It is used to route the client-side application and connect them with the actions and events. When the visitor presses the back button or enters a URL it matches the URL with the particular route and the specified action will fire as an event.
Syntax:
router.routes
Parameters: This parameter is an object which matches the URL to the function or events.
Example 1: In this example, we will illustrate the Backbone.js routes Router. Here we will map the URL component to an event that will write on the document.
HTML
<!DOCTYPE html>
< html >
< head >
< title >BackboneJS routes Router</ title >
type = "text/javascript" >
</ script >
< script src =
type = "text/javascript" >
</ script >
< script src =
type = "text/javascript" >
</ script >
</ head >
< body >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< h3 >BackboneJS routes Router</ h3 >
< script type = "text/javascript" >
var Router = Backbone.Router.extend({
routes: {
'': 'first_route',
'route/2': 'second_route'
},
first_route: function () {
document.write(
"This is by the Router first route.");
},
second_route: function () {
document.write(
"This is by the Router Second route.");
},
});
var router = new Router;
Backbone.history.start();
</ script >
</ body >
</ html >
|
Output:
Backbone.js routes Router
Example 2: In this example, we will listen to the even trigger by the routes.
HTML
<!DOCTYPE html>
< html >
< head >
< title >BackboneJS routes Router</ title >
type = "text/javascript" >
</ script >
< script src =
type = "text/javascript" >
</ script >
< script src =
type = "text/javascript" >
</ script >
</ head >
< body >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< h3 >BackboneJS routes Router</ h3 >
< script type = "text/javascript" >
var Router = Backbone.Router.extend({
routes: {
'': 'first_event',
'route/2': 'second_event'
},
});
var router = new Router;
router.on('route:first_event', function () {
alert(
"This event is trigger by Router")
});
Backbone.history.start();
</ script >
</ body >
</ html >
|
Output:
Backbone.js routes Router
Reference: https://backbonejs.org/#Router-routes
Share your thoughts in the comments
Please Login to comment...