Setting Up Nested Routes

Tuning

Let’s take our primitive UI one step further and make it so that the bands and the songs are displayed at the same time. We’ll have the list of bands on the left, and the list of songs for the selected band (or a placeholder box) on the right.

In API design, has-many associations, like a band with many songs, is very often represented in the URL with the children in the association after the identified parent resource. In our case, that would be /bands/:id/songs.

Such URLs are aesthetically pleasing, but Ember.js provides a more pragmatic benefit to those willing to heed its advice. Nested URLs automatically set up a nested UI, a so-called “master-detail” view, that is a widely used UI pattern. Let’s see how.

Defining the nested routes

Here is a mockup of what we want to build: