How to Think About Routing

Functionalities yet to be created

Our ContactManager app now lets users navigate from the index of the contact to a page displaying a contact. However, once the user gets to the contact’s page, they’re stuck, since the browser’s back button doesn’t work. In addition, users can’t bookmark a contact’s display page, since the URL saved by the browser would be the index page. Later, when the user loads the bookmark again, they’ll end up seeing the contact list view instead of the contact’s display page. To address these issues, we’ll implement routing in our application.

Understanding the router’s role

It’s important that we define the router’s role in order to design our app properly. A router does the following:

• It executes controller actions corresponding to the URL with which the user first entered our Marionette app. It’s important to note that the route-handling code should get fired only when a user enters the application by a URL, not each time the URL changes. Put another way, once a user is within our Marionette app, the route-handling code shouldn’t be executed again, even when the user navigates around.

• It updates the URL in the address bar as the user navigates within the app, i.e., it keeps the displayed URL in sync with the application state. That way, a user could potentially use the same URL (by bookmarking it, emailing it to a friend, etc.) to restore the app’s current configuration, i.e., which views are displayed, etc. Keeping the URL up to date also enables the browser’s back and forward buttons to function properly.