Backbone.js History()

The Backbone.JS History() is a global router. It serves various purposes including,

  • keeping track of the history
  • matching the appropriate route
  • triggering callbacks to handle events
  • enabling routing in the application
  • There is only one method to manipulate, modify or operate the History in Backbone.JS.

    Backbone.js History.Start method:
    The Backbone.js History.Start method is used to start the monitoring of the hashchange events, and dispatching routes after all the Routers have been created, and all the routes have been set.

    Syntax:

    Backbone.history.start (options)   
    

    Parameters:
    options: This parameter is used to specify the other parameters like pushState and hashChange.

    Example:

     
    <!DOCTYPE html>  
    <html>
    <head>  
    <title>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 routeList = Backbone.View.extend({  
    el: '#routelist',  
    events: {  
    'click a' : 'onClick'  
    },  
    onClick: function( e ) {  
    router.navigate('/');  
    }  });  
    var X = Backbone.Router.extend({  
    routes: {  
    'route/:id' : 'defaultRoute'  
    },  });  
    var routelist = new routeList();  
    Backbone.history.start();  
    </script>  
    </head>  
    <body>  
    <section id="routelist">  
    <ul>  
    <li> <a href="#/route1">Route 1 </a> </li>  
    <li> <a href="#/route2">Route 2 </a> </li>  
    <li> <a href="#/route3">Route 3 </a> </li> 
    <li> <a href="#/route4">Route 4 </a> </li> 
    <li> <a href="#/route5">Route 5 </a> </li> 
    </ul>  
    </section>  
    </body>  
    </html>

    Output:

    ●	Route 1
    ●	Route 2
    ●	Route 3
    ●	Route 4
    ●	Route 5
    Please Share