BackboneJS - Router Route

Description

It provides a route for the router and appends the router’s parameter using a slash followed by colons and the parameter's name.

Syntax

router.route(route, name, [callback])

Parameters

route − It may be a routing string or a regular expression.
name − It is the name of a router parameter.
callback − It is the name of the router, if callback argument is omitted.

Example

Live Demo

<!DOCTYPE html>
<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">
      //'RouteMenu' is a name of the view class
      var RouteMenu = Backbone.View.extend ({
         el: '#routemenu',   //'el' defines which element to be used as the view reference

         //defines a click event to be occur on link
         events: {
            'click a' : 'onClick'
         },

         //After clicking on a link, router calls 'navigate' to update URL
         onClick: function( e ) {
            router.navigate('/');
         }
      });

      //'Router' is a name of the router class
      var Router = Backbone.Router.extend ({

         //The 'routes' maps URLs with parameters to functions on your router
            routes: {
               'route/:id' : 'defaultRoute'
            },
      });

      //'routemenu' is an instance of the view class
      var routemenu = new RouteMenu();
   
      //It start listening to the routes and manages the history for bookmarkable URL's
      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>

Output

Let us carry out the following steps to see how the above code works −

Save the above code in the route.htm file.
Open this HTML file in a browser.

NOTE − The above functionality is related to the address bar. So, when you open the above code in the browser, it will show the result as follows.

Click here for the demo

backbonejs_router.htm