Introduction
This chapter demonstrates about the Backbone.js History which serves as a global router and which keeps all track history and following are the concepts are covered in this chapter.
- History
Description
History serves as a global router and keeps the track of the history matches appropriate root and triggers callbacks to handle events. It is enable routing in the application. There is a method named as "start" is used to manipulate the backbone.js history.
start
start method manages the history for bookmarkable urls by keeping monitoring the roots. If all your roots are created then all routes are arranged properly now Backbone.history.start() is called to start monitoring hash change events with dispatching the routes the syntax below demonstrates the Backbone.js history.
[code]
Backbone.history.start(options)
[/code]
Parameter
The code below demonstrates the backbone.js history as shown below.
[html]
<!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>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- Options Which specify the parameters like pushState and hashChange used with history.
Key Points
- History serves as a glober router.
- History contains only one method named as "start".