JavaScript   发布时间:2022-04-16  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了ember.js – 为什么Ember Router只允许导航到叶子路由?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我最近注意到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

还有其他人做过这样的事吗?有没有更好的方法来设计它?

解决方法

我发现这样做的最好方法是使用一个路径为“/”的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列布局做类似的事情,并将中间和右列与上面的路径匹配,并将共享布局中的左列添加到每个可能的中间视图中.

大佬总结

以上是大佬教程为你收集整理的ember.js – 为什么Ember Router只允许导航到叶子路由?全部内容,希望文章能够帮你解决ember.js – 为什么Ember Router只允许导航到叶子路由?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。