javascript - Ember.js 的嵌套路由行为

Question

有人可以解释 Ember.js 中路由器和嵌套路由的行为吗？

生成的 URL、RouteName、Controller、Route 和 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
            });
        });
    });
});

如果您想查看我的 github 上的所有代码https://github.com/Gerst20051/HnS-Wave/tree/master/src/stations

来自我的 github 的 JavaScript 文件https://github.com/Gerst20051/HnS-Wave/blob/master/src/stations/js/app.js

本指南是我所引用的http://emberjs.com/guides/routing/defining-your-routes/

我从这个https://github.com/inkredabull/sonific8tr复制了我的应用程序结构

非常感谢我和整个 emberjs 社区在 emberjs 奋斗巴士上的帮助！

Answer 1

您需要删除嵌套路由的点表示法。使用只是artist代替artists.artist.

您相应的路由器将是，

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' });
      })
    });
  });
});

您可以使用App.Router.router.recognizer.names获取在路由器中映射的路由列表。

这将为您提供以下 URL、路由和控制器。

• /profile - ProfileRoute - ProfileController
• /艺术家 - ArtistsRou​​te - ArtistsController
• /artists/1 - ArtistRoute - ArtistController
• /artists/1/tracks - TracksRoute - TracksController
• /artists/1/tracks/1 - PlayingRoute - PlayingController

另请注意，具有嵌套资源的每个资源也会获得隐式索引路由。例如：- ArtistsIndexRoute、ArtistIndexRoute、TracksIndexRoute，但不是 PlayingIndexRoute，因为它没有嵌套路由。