2013-07-22 46 views
2

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

结果URL,RouteName,控制器,路由和模板是什么?

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

How the app structure looks

非常感谢您的帮助,我会感谢我和整个emberjs社区在emberjs斗争巴士!

回答

3

您需要删除嵌套路由的点符号。只需使用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,路线和控制器。

  • /资料 - ProfileRoute - ProfileController可
  • /艺术家 - ArtistsRou​​te - ArtistsController
  • /艺术家/ 1 - ArtistRoute - ArtistController
  • /艺术家/ 1 /轨道 - TracksRoute - TracksController
  • /艺术家/ 1/tracks/1 - PlayingRoute - PlayingController

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

+0

感谢您的及时回复darshan!我会在明天继续努力,让你知道它是如何发展的。 –