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

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

Answer 1

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.