Home>

...

>

Router Transitions

Router Transitions

In this lesson, you’ll learn which routers are activated in what order when a user visits an Ember website.

Stepping through a router transition

Analyzing exactly what happens when the user visits a URL that was created by a nested route is fundamental to understanding how nested routes set up a nested UI. This is probably one of the greatest “aha!” moments on your journey to Ember mastery. So, let’s see which routes are activated and in what order when a visitor of our site goes to /bands/pearl-jam/songs.

Before this, though, let’s adapt our code to the relationship between bands and songs. We create a Song class and a few instances and assign each song to its appropriate band:

The added code is highlighted and the removed code is commented.

JavaScript (JSX)
// app/routes/bands.js
import Route from '@ember/routing/route'; 
import { tracked } from '@glimmer/tracking';
class Band { 
  @tracked name;
  //  constructor(name) {
  constructor({ id, name, songs }) {
    this.id = id;
    this.name = name;
    this.songs = songs;
  } 
}
class Song {
  constructor({ title, rating, band }) {
    this.title = title;
    this.rating = rating ?? 0;
    this.band = band;
  } 
}
export default class BandsRoute extends Route { 
  model() {
    // return [
    //   new Band('Led Zeppelin'), 
    //   new Band('Pearl Jam'), 
    //   new Band('Foo Fighters'),
    // ];
    let blackDog = new Song({ 
      title: 'Black Dog', 
      band: 'Led Zeppelin', 
      rating: 3,
    });
    let yellowLedbetter = new Song({
      title: 'Yellow Ledbetter',
      band: 'Pearl Jam',
      rating: 4,
    });
    let pretender = new Song({ 
      title: 'The Pretender', 
      band: 'Foo Fighters', 
      rating: 2,
    });
    let daughter = new Song({ 
      title: 'Daughter', 
      band: 'Pearl Jam', 
      rating: 5,
    });
    let ledZeppelin = new Band({ 
      id: 'led-zeppelin',
      name: 'Led Zeppelin', 
      songs: [blackDog],
    });
    let pearlJam = new Band({
      id: 'pearl-jam',
      name: 'Pearl Jam',
      songs: [yellowLedbetter, daughter],
    });
    let fooFighters = new Band({ 
      id: 'foo-fighters',
      name: 'Foo Fighters', 
      songs: [pretender],
    });
  return [ledZeppelin, pearlJam, fooFighters];
  } 
}

Now, with all our data and class definitions updated, we can start inspecting the router transition ...

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