Question

我有这样的路线：

this.route('posts', function() {
  this.route('index', { path: '/' })
  this.route('show', { path: '/:post_path' }, function() {
    this.route('people', { path: '/people' })

    this.route('files', function() {
      this.route('images', { path: '/images' })
      this.route('videos', { path: '/videos' })
    })
  })
}),

我的“活动”课有问题。

例如，使用以下链接：

http://localhost:4200/posts/1-best-post/files/images

在这种情况下，“活动”类将挂在两个链接上-posts.show.files.images和posts.show上。

如何仅使posts.show.files.images的类处于活动状态？

添加

显然，问题不仅在于“活动”类。但是有了模板。孩子们使用“显示”模板。

您能否解释一下如何正确描述这种嵌套路线？

Answer 1

您遇到的问题是因为ember对于路由器中的每个嵌套函数都有一个隐藏的index route。

您的路由文件实际上会扩展为如下所示。

this.route('posts', function() {
  this.route('index', { path: '/' })
  this.route('show', { path: '/:post_path' }, function() {
    this.route('index', { path: '/' }) #New
    this.route('people', { path: '/people' })

    this.route('files', function() {
      this.route('index', { path: '/' }) #New
      this.route('images', { path: '/images' })
      this.route('videos', { path: '/videos' })
    })
  })
}),

当您定义链接路径时，我将假定您完全按照外观指定它，而不是使用隐藏索引。

# Don't do this
{{#link-to 'posts.show' "1234"}}Posts Show{{/link-to}}
{{#link-to 'posts.show.files.images' "1234"}}Images Show{{/link-to}}
# Do this
{{#link-to 'posts.show.index' "1234"}}Posts Show{{/link-to}}
{{#link-to 'posts.show.files.images' "1234"}}Images Show{{/link-to}}

此ember-twiddle显示了您遇到的问题的示例。顶部显示您遇到的问题。底部显示了更正的链接。

同样，您正在使用的show.hbs路由将被视为show下所有路由的包装器。
如果您不希望在查看文件或图像时显示内容，请移动逻辑并显示在posts / show / index.js和posts / show / index.hbs

中

如何仅在当前路线上挂起“活动”课程？

1 个答案: