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

来 self 的 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、路由和 Controller 。

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

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