Nested Routing Behavior for Ember.js

Question

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

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

App.Router.map(function(){
    this.resource('profile');

    // 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 https://github.com/Gerst20051/HnS-Wave/tree/master/src/stations

JavaScript file from my github https://github.com/Gerst20051/HnS-Wave/blob/master/src/stations/js/app.js

This guide is what I'm referencing http://emberjs.com/guides/routing/defining-your-routes/

And I copied my app structure from this https://github.com/inkredabull/sonific8tr

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!

Darshan Sawardekar Darshan Sawardekar · Accepted Answer · 2013-07-22T06:03:27

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

Your corresponding router would be,

App.Router.map(function() {
  this.resource('profile');
  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.

Nested Routing Behavior for Ember.js

1 Answers