为什么Ember路由器只允许导航到叶子路由？

本文介绍了为什么Ember路由器只允许导航到叶子路由？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

现在，除非我正在做错误的事情，否则这样就可以导航到叶路由 - 没有子路由的路由。看起来像设计中的错误/错误。

我们来看看这样的例子：

我有一个收集项目，每个项目都有许多协作者，我想用一个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.