Backbone.js LogoLearn how to pass values to your Backbone router in the URL

In the second part of this series: Getting Started with Backbone.js Routes – Part II: Handling Bad Requests, we learned how to handle route requests that are not configured in our router. This allows us complete control over the user experience, even when the request is one we had not anticipated. But what about parameters? How can we send the router a message? In other words, how can we pass a value in the URL that tells the application something specific?

In this article, we will learn how to pass parameters to the router, and in turn, how to access the values that are passed-in. So, for the examples that follow, we’ll imagine a very simple “order” page which allows you to specify the item you want to order in the URL. In order to keep the examples brief, I have removed any code that is not germane to the current discussion. But the full JS source code URL will be provided with each link to the working demo.

Example # 1

In Example # 1, we’ve set up a route named: “order/:item”. Up until now, our route names have been a single or hyphen-separated word. This new syntax, however, allows for more functionality.

Notice that in the route’s name, there is a colon. That colon tells Backbone that what follows is a parameter. So in this case, the actual route is “order/” and “:item” is a placeholder for whatever the user provides in that part of the URL. That value is an unknown, so we use the word “item” to represent this unknown value.

This route is handled by the method: “route”. Notice that the “route” method takes one argument: “item” (we could have named it anything, but I used “item” just to keep things consistent). This represents the parameter that was provided in the URL. So, inside of the “order” method, we now have access to that parameter.

HERE IS THE WORKING DEMO LINK FOR EXAMPLE # 1: http://examples.kevinchisholm.com/backbone/routes/basics/html/part-iii-ex1.html

HERE IS THE LINK FOR EXAMPLE # 1’s JavaScript: http://examples.kevinchisholm.com/backbone/routes/basics/js/part-iii-ex1.js

How to Demo:

Below the main nav is a brown navigation menu. As you click each menu item, notice that the URL changes. For example: “#/order/chair” or “#/order/shirt”. So, with each click, the message in the page will reflect the parameter passed in the URL after “#/order/”. You can enter whatever you like after “#/order/”, and that value will be reflected in the page’s message.

But what if the user wants to order more than one item?

Yes! This is a very logical feature to implement. It is common to specify a quantity when you order something. So, we’ll need to adjust our router so that the user can also provide the quantity in the URL in addition to the item name.

Example # 2

In Example # 2, we’ve added a new route: “order/:item/:count”. This route is also handled by the “order” method. There are two changes. This new route allows for a “count” parameter (i.e. “:count/”), and the “order” method takes a second argument: “count”.

Inside of the “order” method, we have updated the message that is injected into the DOM to include the “count” parameter, or the quantity of items to be ordered.

HERE IS THE WORKING DEMO LINK FOR EXAMPLE # 2:

http://examples.kevinchisholm.com/backbone/routes/basics/html/part-iii-ex2.html

HERE IS THE LINK FOR EXAMPLE # 1’s JavaScript:

http://examples.kevinchisholm.com/backbone/routes/basics/js/part-iii-ex2.js

How to Demo:

Below the main nav is a brown navigation menu. As you click each menu item, notice that the URL changes. For example: “#/order/chair/1” or “#/order/shirt/2”. With each click, the message in the page will reflect the parameter passed in the URL after “#/order/”, as well as the quantity (i.e. “#/order/quantity”).

But now we have a problem: If the user enters ““#/order/item” but does not specify a quantity, then the quantity will show up in the DOM as “undefined”. That’s not a good user experience, so let’s handle that exception.

Example # 3

In Example # 3, we’ve made two adjustments to our code. First, we’ve added a new route: “order/:item/”, which is handled by the “order” method. Second, we’ve added a quick check at the top of the “order” method: if (!count){count = 1}. This tells the “order” method: “hey, if the count argument is 0 or is not provided, then just make the quantity: 1).

HERE IS THE WORKING DEMO LINK FOR EXAMPLE # 3:

http://examples.kevinchisholm.com/backbone/routes/basics/html/part-iii-ex3.html

HERE IS THE LINK FOR EXAMPLE # 3’s JavaScript:

http://examples.kevinchisholm.com/backbone/routes/basics/js/part-iii-ex3.js

How to Demo:

Below the main nav is a brown navigation menu. As you click each menu item, notice that the URL changes. For example: “#/order/chair” or “#/order/shirt/”. Note that in the case of the first two links there is no quantity provided. In both cases, our “order” method sets the quantity to: 1.

Summary

In this article we learned how to pass parameters to a Backbone.js route. We learned the syntax needed to specify which part of the route request is the actual route and which part is the parameter. We discussed how to access that parameter in the function that handles the route request, how to allow for multiple parameters, and how to handle corner cases where an expected parameter is not provided.