Home/

...

/

Setting Up Nested Routes

Setting Up Nested Routes

You’ll learn how to set up and use nested routes in an Ember application in this lesson.

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:

Our routes currently look like this:

Press + to interact
// app/router.js
import EmberRouter from '@ember/routing/router';
import config from 'rarwe/config/environment';
export default class Router extends EmberRouter {
    location = config.locationType;
    rootURL = config.rootURL;
}
Router.map(function() {
    this.route('bands');
    this.route('songs');
});

These two routes have no relation to each other, meaning they exist independently. What we ...

Access this course and 1200+ top-rated courses and projects.

Create a free account to view this lesson.

By signing up, you agree to Educative's Terms of Service and Privacy Policy