我最近注意到 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 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 列布局做类似的事情,并将中间列和右列与上面的路线相匹配,并将共享布局中的左列添加到每个可能的中间视图。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)