Backbone.js History

The backbone.js history serves as a global router, keeps track of the history, matches the appropriate route and triggers callbacks to handle events and enable routing in the application.

There is only method named "start" can be used to manipulate the Backbone.js history.

start:

The start method listens to routes and manages the history for bookmarkable URL's. When all of your Routers have been created, and all of the routes are set up properly then Backbone.history.start() is called to begin monitoring the hashchange events, and dispatching routes.

Syntax:

Parameter explanation:

options: The "options" specifies the parameters like pushState and hashChange used with history.

Let's take an example.

See this example:

<!DOCTYPE html>
   <head>
      <title>Backbone.js History 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>
   </head>
   <script type="text/javascript">
      var Router = Backbone.Router.extend({
         routes: {
            "myroute" : "myFunc"
         },
         myFunc: function (myroute) {
            document.write(myroute);
         }
      });
      var router = new Router();
     Backbone.history.start({ pushState: true });  
  </script>
  <body>
     <a href="#route1">Route1 </a>
     <a href="#route2">Route2 </a>
     <a href="#route3">Route3 </a>
  </body>
</html>

Test it Now

Output:

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