ember.js 路由层次结构答案

【问题标题】：ember.js routing hierarchyember.js 路由层次结构
【发布时间】：2012-10-17 16:43:19
【问题描述】：

我想要路由层次结构。因此，如果 URL “#/user/123” 和 “#/user/123/albums” 可以工作，那就太好了。我想这样做：

App.Router = Em.Router.extend({
  root: Em.Route.extend({
    index: Em.Route.extend({
      route: '/'
    }),
    user: Em.Route.extend({
      route: '/user/:login',
      connectOutlets: function(router, context){
        router.get('applicationController').connectOutlet('user', context);
      },
      albums: Em.Route.extend({
        route: '/albums',
        connectOutlets: function(router){
          router.get('applicationController').connectOutlet('albums');
        }
      })
    })
  })
});

不是这样：

App.Router = Em.Router.extend({
  root: Em.Route.extend({
    index: Em.Route.extend({
      route: '/'
    }),
    user: Em.Route.extend({
      route: '/user/:login',
      connectOutlets: function(router, context){
        router.get('applicationController').connectOutlet('user', context);
      }
    }),
    albums: Em.Route.extend({
      route: '/user/:login/albums',
      connectOutlets: function(router){
        router.get('applicationController').connectOutlet('albums');
      }
    })
  })
});

我的第一个代码示例很愚蠢，但我想要路由层次结构。有没有能力做到这一点？！

【问题讨论】：

标签： ember.js ember-old-router

【解决方案1】：

这种事情当然是可行的。有很多嵌套路由的例子。我无法根据实际应用检查您的特定路由器，但在Ember Application Structure guide 中有一个非常长的示例。请参阅嵌套部分。你会发现这个：

post: Ember.Route.extend({
  route: '/posts/:post_id',
  connectOutlets: function(router, post) {
    router.get('applicationController').connectOutlet('post', post);
  },
  index: Ember.Route.extend({
    route: '/',
    redirectsTo: 'comments'
  }),
  comments: Ember.Route.extend({
    route: '/comments',
    showTrackbacks: Ember.Route.transitionTo('trackbacks'),
    connectOutlets: function(router) {
      var postController = router.get('postController');
      postController.connectOutlet('comments', postController.get('comments'));
    }
  }),
  trackbacks: Ember.Route.extend({
    route: '/trackbacks',
    showComments: Ember.Route.transitionTo('comments'),
    connectOutlets: function(router) {
      var postController = router.get('postController');
      postController.connectOutlet('trackbacks', postController.get('trackbacks'));
    }
  })
})

【讨论】：

+1，我确认@user1753867 的第一个实现应该可以工作。