Learn how to handle requests for a route that you have not configured
In the first part of this series: Getting Started with Backbone.js Routes – Part I: Introduction, we learned how to set up routing in a single page web application. We covered two kinds of routes: a “default” route (i.e. no route is requested), and a named route.
In this article, we will learn how to configure a Backbone router for a bad request. To be specific, a bad request would be one that you have not anticipated (i.e. you have not configured your router for that specific request). In the previous example, if you were to request a route other than “info”, there would be no error, but this is an unhandled case, and not the best user experience.
Here are two examples of unhanded exceptions from Part-I of this series:
http://examples.kevinchisholm.com/backbone/routes/basics/html/part-i.html#/bad-request
http://examples.kevinchisholm.com/backbone/routes/basics/html/part-i.html#/another-bad-request
In both cases, the page loads, but there is no message because the router was not configured to handle the routes: “#/bad-request” and “#/another-bad-request”.
Example # 1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
var AppRouter = Backbone.Router.extend({ routes: { "": "defaultRoute", "info": "info", "*actions" : "pageNotFound" }, defaultRoute: function () { $('#main').html('<div class="mainMessage">This is the default route</div>'); }, info: function () { $('#main').html('<div class="mainMessage">This is the "Info" page</div>'); }, pageNotFound: function () { $('#main').html('<div class="mainMessage">Sorry, the page you requested was not found</div>'); } }); var app = new AppRouter(); $(document).ready(function() { Backbone.history.start(); }); |
In Example # 1, we have updated the object passed to the Backbone.Router.extend method. There is now a third route named: “*actions”. This tells Backbone that if a request is not one of the first two specified (i.e. “” and “info”), then execute the “pageNotFound” method.
The “pageNotFound” method is similar to the other route handlers, but injects a message into the DOM that is specific to this scenario: the user has requested a route that does not exist. This way, instead of “nothing” happening, you can present very specific content to the user.
HERE IS THE JS-FIDDLE.NET LINK FOR EXAMPLE # 1: http://examples.kevinchisholm.com/backbone/routes/basics/html/part-ii.html
How to Demo:
When the page loads, you will see the message: “This is the default route”, and if you click the “info” link, you will see the message: This is the “Info” page. But if you click the link: “Bad request”, you will see the message: “Sorry, the page you requested was not found”. The reason for this is that there is no route configured for: “#/bad-request”. In fact, no matter what you request, unless that route request is: “” or “info”, then you will see the message: “Sorry, the page you requested was not found”
Here are a few examples:
http://examples.kevinchisholm.com/backbone/routes/basics/html/part-ii.html#/no-route-here
http://examples.kevinchisholm.com/backbone/routes/basics/html/part-ii.html#/no-route
http://examples.kevinchisholm.com/backbone/routes/basics/html/part-ii.html#/not-handled
When you click any of the links above, you will still get the message: “Sorry, the page you requested was not found”.
Summary
In this article, we learned how to configure our Backbone router to handle bad requests. We discussed the “*actions” property of the “routes” object, and how to make sure it is the last property specified in that object. We also set up a function to be executed whenever a bad route request is made.