English 中文(简体)
BackboneJS Tutorial

BackboneJS Useful Resources

Selected Reading

BackboneJS - History
  • 时间：2024-11-03

BackboneJS - History

Previous Page Next Page  

It keeps a track of the history, matches the appropriate route, fires callbacks to handle events and enables the routing in the apppcation.

start

This is the only method which can be used to manipulate the BackboneJS-History. It starts pstening 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/pbs/underscore.js/1.8.2/underscore-min.js"
         type = "text/javascript"></script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/pbs/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 pnks for the route on the browser
         myFunc: function (myroute) {
            document.write(myroute);
         }
      });

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

      //Start pstening to the routes and manages the history for bookmarkable URL s
      Backbone.history.start();
   </script>
   
   <body>
      
      <a href = "#route1">Route1 </a>
      <a href = "#route2">Route2 </a>
      <a href = "#route3">Route3 </a>
   </body>
   
</html>

Output

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

    Save the above code in the start.htm file.

    Open this HTML file in a browser.