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!
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.
来源：https://stackoverflow.com/questions/17780344/nested-routing-behavior-for-ember-js