6

我最近使用 Ember 路由器注意到的一点是它只允许导航到叶路由——没有子路由的路由。

现在，除非我做错了事情，否则这似乎是设计中的错误/错误。

让我们以这样的例子为例：

我有一个项目集合，每个项目都有很多合作者，我想构建一个具有 3 列布局的 UI（类似于您的标准桌面电子邮件客户端），在左侧我有一个项目列表，单击时project 中间的列显示了一个协作者列表，单击协作者会将其详细信息加载到右侧列中。

现在有了我想要/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/routeable .js#L81

有没有其他人做过这样的事情？有没有更好的方法来设计这个？

4

2 回答 2

7

我发现做到这一点的最好方法是拥有一个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)
  )
)

NB 话虽如此，我正在使用 3 列布局做类似的事情，并且将中间列和右列与上面的路线相匹配，并将共享布局中的左列添加到每个可能的中间视图中。

于 2012-07-08T06:57:29.217 回答
2

I think this issue is resolved. I am using ember routes without an index and do not face any leaf state issues. I was browsing why we need an index at all and I landed up here. Is there any other reason for using the index state too?

于 2012-10-03T09:04:12.507 回答