Backbone.js routes Router

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>
    <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 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>
    <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 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

HTML

HTML

Contact Us