Nested Routing Behavior for Ember.js

Can someone explain the behavior of the router and nested routes in Ember.js?

What are the resulting URL, RouteName, Controller, Route, and Template?{

    // URL: /profile
    // RouteName: profile
    // Controller: ProfileController
    // Route: ProfileRoute
    // Template: profile

    this.resource('artists', function(){

        // URL: /artists
        // RouteName: artists OR artists.index
        // Controller: ArtistsController OR ArtistsIndexController
        // Route: ArtistsRoute OR ArtistsIndexRoute
        // Template: artists OR artists/index

        this.resource('artists.artist', { path: ':artist_id' }, function(){

            // URL: /artists/:artist_id
            // RouteName: artists.index OR artist.index
            // Controller: ArtistsIndexController OR ArtistIndexController
            // Route: ArtistsIndexRoute OR ArtistIndexRoute
            // Template: artists/index OR artist/index

            this.resource('artist.tracks', function(){

                // URL: /artists/:artist_id/tracks
                // RouteName: artists.tracks OR artists.artist.tracks OR artist.tracks
                // Controller: ArtistsTracksController OR ArtistsArtistTracksController OR ArtistTracksController
                // Route: ArtistsTracksRoute OR ArtistsArtistTracksRoute OR ArtistTracksRoute
                // Template: artists/tracks OR artists/artist/tracks OR artist/tracks

                this.route('playing', { path: ':track_id' });

                    // URL: /artists/:artist_id/tracks/:track_id
                    // RouteName: tracks.index
                    // Controller: TracksIndexController
                    // Route: TracksIndexRouteRoute
                    // Template: tracks/index

If you would like to see all of the code on my github

JavaScript file from my github

This guide is what I'm referencing

And I copied my app structure from this

How the app structure looks

Many thanks in advance and assistance would be appreciated by me and the whole emberjs community on the emberjs struggle bus!



You need to remove the dot notation for the nested routes. Use just artist instead of artists.artist.

Your corresponding router would be, {
  this.resource('artists', function() {
    this.resource('artist', { path: ':artist_id'}, function() {
      this.resource('tracks', function() {
        this.resource('playing', { path: ':track_id' });

You can use App.Router.router.recognizer.names to get a list of routes being mapped in the Router.

This will give you the following URLs, routes and controllers.

  • /profile - ProfileRoute - ProfileController
  • /artists - ArtistsRoute - ArtistsController
  • /artists/1 - ArtistRoute - ArtistController
  • /artists/1/tracks - TracksRoute - TracksController
  • /artists/1/tracks/1 - PlayingRoute - PlayingController

Also note, each resource that has a nested resource also gets an implicit index route. Eg:- ArtistsIndexRoute, ArtistIndexRoute, TracksIndexRoute, but not PlayingIndexRoute because it has no nested routes.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.