BackboneJS - History Start

Quiz

Description

It start listening to routes and manages the history for bookmarkable URL's.

Syntax

Backbone.history.start(options)

Parameters

options − The options include the parameters such as pushState and hashChange used with history.

Example

<!DOCTYPE html>
<html>
   <head>
      <title>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">
       //'Router' is a name of the router class
      var Router = Backbone.Router.extend({

         //The 'routes' maps URLs with parameters to functions on your router
         routes: {
            "myroute" : "myFunc"
         },

         //'The function 'myFunc' defines the links for the route on the browser
         myFunc: function (myroute) {
            document.write(myroute);
         }
      });

      //'router' is an instance of the Router
      var router = new Router();

      //It start listening to the routes and manages the history for bookmarkable URL's
      Backbone.history.start();
   </script>
   <body>
      //These links will get display on the browser for changing the url each time when you click on them
      <a href="#route1">Route1 </a>
     <a href="#route2">Route2 </a>
     <a href="#route3">Route3 </a>
   </body>
</html>

Output

Let's carry out the following steps to see how above code works −

Save above code in start.htm file
Open this HTML file in a browser.

NOTE: That above functionality is related to address bar so when you will open above code in actual browser then it will show result as follows

Click here for the demo

Print Page