Full Stack Web Development with Backbone.js

Chapter 4. Router Basics

In the previous chapter, we tracked mouse clicks to select movies. We also discussed how changes in models and collections can notify Backbone.Views. Yet, the state of a model or collection was invisible from the outside.

Referencing state across the Web is very important, however. Links are one of the main drivers behind hypertext media. How can we let users share their browser states with other users? And how can Backbone.js support us with “deep” linking?

Addressability of state is provided by Backbone.Router, and this is the scope for this chapter. Additionally, we will render details of a movie and see how the router orchestrates the setup of views.

In summary, we will discuss the following topics:

• Using a router for navigating between states
• Sharing a layout across routes
• Rendering child views

Addressing State

With Backbone views, we were able to trigger state changes in a Backbone collection. Now let’s look at another way to select movies: by using routes. In an abstract sense, both a router and a view are similar in controlling state changes.

The goal of a Movies router is to provide a mapping from the URL for movies to an application state (e.g., a selected movie).

Users will then be able to share details of The Artist with a friend, or simply bookmark the URL for later:

http://example.com/#movies/the-artist

Note the hash in the URL. The hash (or sometimes hashbang) indicates a separation from server-side and client-side parts of a URL. This break in ...