Backbone.js Router.extend()

The Backbone.js router extend method is used to extend the router class and create new constructor inherited from the Backbone.Router. It defines some triggered actions when specific URL fragments are matched and provides routes for those actions.

Syntax:

Parameter explanation:

properties: It specifies the instance properties for the router class.
classProperties: It specifies the class properties that are attached to the router's constructor function.

Let's take an example.

See this example:

<!DOCTYPE html>
   <head>
      <title>Router Extend 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>

       <script type="text/javascript">
         var RouteMenu = Backbone.View.extend({
            el: '#routemenu',  //'el' defines which element to be used as the view reference
            events: {
               'click a' : 'onClick'
            },
            onClick: function( e ) {
               router.navigate('/');
            }
        });
        var Router = Backbone.Router.extend({
           routes: {
              'route/:id' : 'defaultRoute'
           },
        });
        var routemenu = new RouteMenu();
        Backbone.history.start();
      </script>
     </head>
  <body>
     
    <section id="routemenu">
        <ul>
           <li> <a href="#/route/1">This is route no.1 </a> </li>
           <li> <a href="#/route/2">This is route no. 2 </a> </li>
           <li> <a href="#/route/3">This is route no. 3 </a> </li>
       </ul>
    </section>
  </body>
</html>

Test it Now

Output:

Save the above code in extend.html file and open this file in a new browser.