Backbone.js route Router is a method that is used to create the route for the router manually. The argument of the route may be a routing string or regular expression and each capture string from the route is passed to the callback function of the route.
Syntax:
router.route( route, name, callback );
Parameters:
- route: This parameter is a routing string that will match the URL.
- name: This parameter is used for naming the trigger route: name when the route match.
- callback: This parameter is a function that will be called whenever the route will be matched.
Example1: In this example, we will illustrate the Backbone.js route Router. Here will match the route and append some strings in DOM.
<!DOCTYPE html> < html >
< head >
< title >BackboneJS route Router</ title >
< script src =
type = "text/javascript" >
</ script >
< script src =
type = "text/javascript" >
</ script >
< script src =
type = "text/javascript" >
</ script >
</ head >
< body style = "text-align:center;" id = "body" >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< h3 >BackboneJS route Router</ h3 >
< li > < a href = "#/link/1" >link_1 </ a > </ li >
< p id = '1' > </ p >
< script type = "text/javascript" >
function write() {
document.getElementById('1')
.append("This is written by route");
}
var Router = Backbone.Router.extend({});
var router = new Router();
router.route("link/1", 'link', write);
Backbone.history.start();
</ script >
</ body >
</ html >
|
Output: In the output route match the URL and append string.
Example 2: In this example, we will use the default route which will match all the URLs if the URL is not defined in the route.
<!DOCTYPE html> < html >
< head >
< title >BackboneJS route Router</ title >
< script src =
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 route Router</ h3 >
< ul >
< li > < a href = "#/link/1" >link_1 </ a > </ li >
< li > < a href = "#/linkisdefault" >other link </ a > </ li >
</ ul >
< p id = '1' > </ p >
< p id = '2' > </ p >
< script type = "text/javascript" >
var Router = Backbone.Router.extend({
routes: {
'link/:id': 'link',
'*default': 'link2',
},
link: function () {
document.getElementById('2')
.append("This is written by route");
},
link2: function () {
document.getElementById('1')
.append("This is written by Default route hello");
}
});
var router = new Router();
Backbone.history.start();
</ script >
</ body >
</ html >
|
Output:
Reference: https://backbonejs.org/#Router-route