Backbone.js extend Router

Last Updated : 18 Jul, 2022

The Backbone.js extend Router is used to extend the Backbone’s Router class in which we can create our own Model. It also facilitates the instance property that are attached to the constructor function of the Router directly. It provide a router hash that pairs routes to action.

Syntax:

Backbone.Router.extend(  properties, classProperties );

Parameters: It accepts two parameters that are described below:

Parameters: This parameter provides the instance properties for the specified Router class.
classProperties: This class property is attached to the Router’s constructor function.

Example 1: In this example we will illustrate The Backbone.js extend Router. We will create our own Router class with the help of extend method.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <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;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3>BackboneJS Router extend</h3> 
  
    <script type="text/javascript"> 
        var Router = Backbone.Router.extend({ 
  
            routes: { 
                '#rout1': 'role1', 
                '#rout2': 'role2', 
            }, 
  
            role1: function () { 
                document.write( 
                  "Illustrating Router extend!!!" 
                ); 
            }, 
            role2: function () { 
                document.write( 
                  "Illustrating Router extend!!!" 
                ); 
            } 
        }); 
  
        var appRouter = new Router(); 
  
        document.write(JSON.stringify(appRouter)); 
    </script> 
</body> 
  
</html>

Output:

Backbone.js extend Router

Example 2: In this example we will add some initial function to our custom Router class which will call whenever new instance of class is called.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <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;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3>BackboneJS Router extend</h3> 
  
    <script type="text/javascript"> 
        var Router = Backbone.Router.extend({ 
  
            routes: { 
                '': 'r1', 
            }, 
  
            r1: function () { 
                document.write( 
                  "Illustrating Router extend!!!" 
                ); 
            } 
        }); 
  
        var appRouter = new Router(); 
        Backbone.history.start(); 
    </script> 
</body> 
  
</html>