现在,除非我正在做错误的事情,否则这样就可以导航到叶路由 - 没有子路由的路由。看起来像设计中的错误/错误。
我们来看看这样的例子:
我有一个收集项目,每个项目都有许多协作者,我想用一个3列布局(类似你的标准桌面电子邮件客户端)构建一个UI,在左边我有一个项目列表,当点击一个项目中间列显示协作者列表,然后点击协作者将其详细信息加载到右侧列。
现在,我想导航到 / projects / 1 当点击一个项目时,点击协作者 / projects / 1 / collaborators / 23
这是一个路由器,说明了嵌套路由的第一部分:
App.reopen(路由器:Ember.Router.extend( enableLogging:true 位置:'哈希' root:Ember.Route.extend( index:Ember.Route.extend( route:'/' redirectsTo:'projects' ) 项目:Ember.Route.extend(#此路由不可路由,因为它不是叶子路由。 route:'/ projects' connectOutlets:(router) - > #列出左列中的项目 router.get('applicationController')。connectOutlet('projects',App.projects) 显示:Ember.Route.extend($ 路由:'/:project_id' connectOutlets:(路由器,项目) - > #渲染该项目进入第二列,实际上是#一个协作者列表 router.get('projectsController')。connectOutlet('project',project)) ))))如你所见Ember不会调用updateRoute(设置URL),直到转换到 root.projects.show ,因为这行 github/emberjs/ember.js/blob/master/packages/ember -routing / lib目录/ routable.js#L81
有没有人做过这样的事情?有没有更好的方法来设计这个?
解决方案我发现这样做的最好办法是有一个code> root.projects.index 状态的路由为/,没有别的。这样每个页面都有自己的具体状态。
项目:Ember.Route.extend(# 路由:'/ projects' connectOutlets:(路由器) - > #列左侧栏中的项目 router.get('applicationController')。connectOutlet('projects',App.projects) index:Ember.Route.extend( route:/) 显示:Ember.Route.extend(#这条路由是可路由的,因为它是一条叶子路由 route:'/:project_id' connectOutlets:(路由器,项目) - > #将项目渲染到第二列,实际上渲染#一个协作者列表 router.get('projectsController')。connectOutlet ('项目',项目)))NB就这样说,我正在做一个类似于3列布局的事情,并且将中间和右边的列匹配到上面的路线,并将共享布局中的左列添加到每个可能的中间视图。
Something I have noticed recently with Ember Router is it only allows navigating to leaf routes — routes without child routes.
Now unless I'm doing things incorrectly then this seems like a bug/mistake in design.
Let's take for example something like this:
I have a collection of projects, each project has many collaborators, with this I want to build a UI with a 3 column layout (something like your standard desktop email client) where on the left I have a list of projects, when clicking on a project the middle column shows a list of collaborators, and clicking on a collaborator loads its details into the righthand column.
Now with the routing I want to navigate to /projects/1 when clicking on a project and onto /projects/1/collaborators/23 when clicking on a collaborator.
Here is a router illustrating the first part of nested route:
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) ) ) ) ) )As you'll see Ember doesn't call updateRoute (set the URL) until transitioning to root.projects.show because of this line github/emberjs/ember.js/blob/master/packages/ember-routing/lib/routable.js#L81
Has anyone else done anything like this? Is there a better way to design this?
解决方案The best way I've found to do this is to have a root.projects.index state with a route of "/" and nothing else. This way every page has it's own specific state.
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) ) )N.B. That being said I'm doing a similar thing with a 3 column layout, and am matching the middle and right column to the routes as above and adding the left column in a shared layout to each of the possible middle views.
更多推荐
为什么Ember路由器只允许导航到叶子路由?
发布评论