我最近注意到Ember Router的一些东西是它只允许导航到叶子路径 – 没有子路由的路由.
我们来举例如下：
我有一个项目集合,每个项目都有很多合作者,我想建立一个具有3列布局的UI(类似于您的标准桌面电子邮件客户端),在左边我有一个项目列表,当点击一个项目中间列显示协作者列表,单击协作者将其详细信息加载到右侧列.
现在有了路由,我想在点击项目时导航到/ projects / 1,在点击协作者时导航到/ projects / 1 / collaborators / 23.
这是一个说明嵌套路由的第一部分的路由器：
App.reopen(
Router: Ember.Router.extend(
enableLogging: true
location: 'hash'
root: Ember.Route.extend(
index: Ember.Route.extend(
route: '/'
redirectsTo: 'projects'
)
projects: Ember.Route.extend(
# This route is not routable because it is not a leaf route.
route: '/projects'
connectOutlets: (router) ->
# List projects in left column
router.get('applicationController').connectOutlet('projects',App.projects)
show: Ember.Route.extend(
# This route is routable because it is a leaf route.
route: '/:project_id'
connectOutlets: (router,project) ->
# Render the project into the second column,which actually renders
# a list of collaborators.
router.get('projectsController').connectOutlet('project',project)
)
)
)
)
)
你会看到Ember没有调用updateRoute(设置URL),直到过渡到root.projects.show因为这行https://github.com/emberjs/ember.js/blob/master/packages/ember-routing/lib/routable.js#L81
还有其他人做过这样的事吗？有没有更好的方法来设计它？
解决方法
我发现这样做的最好方法是使用一个路径为“/”的root.projects.index状态,而不是其他任何东西.这样每个页面都有自己的特定状态.
projects: Ember.Route.extend(
# This route is not routable because it is not a leaf route.
route: '/projects'
connectOutlets: (router) ->
# List projects in left column
router.get('applicationController').connectOutlet('projects',App.projects)
index: Ember.Route.extend(
route: "/"
)
show: Ember.Route.extend(
# This route is routable because it is a leaf route.
route: '/:project_id'
connectOutlets: (router,project) ->
# Render the project into the second column,which actually renders
# a list of collaborators.
router.get('projectsController').connectOutlet('project',project)
)
)
注：话虽如此,我正在使用3列布局做类似的事情,并将中间和右列与上面的路径匹配,并将共享布局中的左列添加到每个可能的中间视图中.
