Backbone.js route Router
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.
HTML
<!DOCTYPE html> < html > < head > < title >BackboneJS route Router</ 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 style = "text-align:center;" id = "body" > < h1 style = "color: green;" > w3wiki </ 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.
HTML
<!DOCTYPE html> < html > < head > < title >BackboneJS route Router</ 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 > < h1 style = "color: green;" > w3wiki </ 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
Contact Us