Learn how to configure a function that initializes your Backbone.js router
In the last few articles of this series, we have learned the basics of setting up routes in Backbone.js. We’ve discussed setting up route handlers, specifying a default route, graceful actions for corner-cases, as well as passing parameters to routes. But what about setup tasks? Sometimes you may want to execute code in preparation for your routes, but these tasks need to be completed before the routes are activated.
In this article, we will learn how to set up an initialization function that will run once, and is guaranteed to do so before the router is started.
Like much of what we have already discussed with regards to Backbone, this functionality is fairly straightforward. In the object that we pass to the Backbone.Router.Extend method, we provide an “initialize” property, which will be a method.
NOTE: In the code examples that follow, I have removed most of the implementation code so that the example will be shorter and easier to follow.
Example # 1
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
var AppRouter = Backbone.Router.extend({ routes: { "": "defaultRoute", //other routes removed for brevity }, initialize: function () { $('#routerInitMessage').fadeIn(2000); }, defaultRoute: function () { //handle default route here... } //other router handlers removed for brevity }); var app = new AppRouter(); $(document).ready(function() { Backbone.history.start(); }); |
In Example # 1, we have added a property that is passed-into the Backbone.Route.extend method. This property is named: “initialize” and it is a method. This method will execute before the router is started. In this example, we simply fade-in a message, letting the user know that the router is initialized.
HERE IS WORKING CODE LINK FOR EXAMPLE # 1:
http://examples.kevinchisholm.com/backbone/routes/basics/html/part-iv-ex1.html
Example # 2
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
function domSetup(){ setTimeout(function(){ $(document).ready(function() { Backbone.history.start(); $('#routerInitMessage').fadeIn(); }); $('nav li a').click(function(){ $('#routerInitMessage').hide(); $('#pageReload').fadeIn(); }); },5000); }; var AppRouter = Backbone.Router.extend({ routes: { "": "defaultRoute", //other routes removed for brevity }, initialize: function () { domSetup(); }, defaultRoute: function () { //handle default route here... } //other router handlers removed for brevity }); var app = new AppRouter(); $(document).ready(function() { Backbone.history.start(); }); |
In Example # 2, we’ve upgraded our initialize method a bit. First, we moved all of the initialization code to the function: domSetup, just to keep the example code short and simple. There is no need to discuss the domSetup function in detail; it simply fades-in a message and sets up a few click handlers.
What interests us is the functionality that is provided here. Notice that when the page loads, if you click any of the nav links, nothing happens. This is because the router has not not been started yet. I have set a five-second timeout that delays the router’s start (the AJAX loader gif is spinning during this timeout). Once you see the green message fade-in, then all of the nav element clicks will work.
The point here was to demonstrate that if you have tasks you’d like to complete before the router is started, you can safely queue them up inside of the “initialize” method.
HERE IS WORKING CODE LINK FOR EXAMPLE # 2: http://examples.kevinchisholm.com/backbone/routes/basics/html/part-iv-ex2.html
How to Demo:
When the page loads, notice that there is an AJAX loader gif. As long as you see that AJAX loader, none of the nav element links work. Once the AJAX loader goes away and the message in a green box fades in, the nav links will work as expected. What is being demonstrated here is the fact that you can execute any setup code from the “initialize” method and then start the router manually as you wish. This is accomplished in the example code by placing all of the code that sets up the delay in the “initialize” method.
Summary
In this article, we learned how to set up an initialization function for a Backbone.js router. We learned about the “initialize” property of the object that we pass into Backbone.Router.extend, as well as how to manually start the router once our setup tasks have completed.
[…] problem by leveraging the “initialize” method. If you remember from the article: “Getting Started with Backbone.js Routes – Part IV: Configuring an Initialization Function”, the “initialize” method only executes once. This is a perfect place to handle setup tasks […]