CodesJava

Easy learning with example program codes

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 follow and like us:
    error









    Copyright © 2019 CodesJava DMCA.com Protection Status