Backbone.js js Routing

Last Updated : 17 Aug, 2022

Backbone.js is a compact library used to organize JavaScript code. Another name for it is an MVC/MV* framework. If you are not familiar with MVC, it’s just a method for creating user interfaces. JavaScript functions make it much simpler to create a program’s user interface. Models, views, events, routers, and collections are among the building blocks offered by BackboneJS to help developers create client-side web applications.

The user is served by the web server depending on the request given by the browser, but how the user will communicate that information to the browser is where the URL comes in. The functionality of routing is exactly what the term means itself i.e. directing in some direction. In web applications, you need to create and provide linkable, bookmarkable, and shareable URLs to significant locations in the app. In Backbone, we use a router to update the URL whenever the user goes to any particular location in the web app, so that they can share or bookmark the address to that particular location. The Router helps to map out the location when the user presses the back button by using the history function.

Syntax to use the router:

routes: {  
    'keyword_1': 'exampleFunc_1',  
    'keyword_2': 'exampleFunc_2'  
    ...
}, 
exampleFunc_1: function() {  
    ... 
},  
exampleFunc_2: function() {  
    ...  
}, 
...

Example 1: The code below demonstrates how to create a router in backbone.js.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Backbone.js Routing</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;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3>Backbone.js Routing</h3> 
  
    <script type="text/javascript"> 
  
        var Router = Backbone.Router.extend({ 
            routes: { 
                'first_link': 'first_route', 
                'second_link': 'second_route' 
            }, 
            first_route: function () { 
                document.write("Called the First Route"); 
            }, 
  
            second_route: function () { 
                document.write("Called the Second Route."); 
            }, 
        }); 
        var router = new Router(); 
  
        Backbone.history.start(); 
    </script> 
</body> 
</html> 

Output:

Example 2: The code below demonstrates how we can use buttons to route to different locations.

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>Backbone.js Routing</h3> 
    <div id="content"> 
        <button><a href="#/first_link">Go to First Route</a></button> 
        <button><a href="#/second_link">Go to Second Route</a></button> 
    </div> 
  
    <script type="text/javascript"> 
  
        var demoRouter = Backbone.Router.extend({ 
            routes: { 
                'first_link': 'first_route', 
                'second_link': 'second_route' 
            }, 
            first_route: function () { 
                document.write("First Route called."); 
            }, 
  
            second_route: function () { 
                document.write("Second Route called."); 
            }, 
        }); 
        var mydemo = new demoRouter({}); 
  
        Backbone.history.start(); 
    </script> 
</body> 
</html>