为什么Ember路由器只允许导航到叶子路由？ [英] Why does Ember Router only allow navigating to leaf routes?

问题描述

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

我们来看看这样的例子：

我有一个收集项目，每个项目都有许多协作者，我想用一个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 ，因为这行 https://github.com/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 https://github.com/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路由器只允许导航到叶子路由？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！