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

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对于路由器中的每个嵌套函数都有一个隐藏的索引路由 。

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

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}}

这项余烬式操作显示了您遇到的问题的示例。 顶部显示您遇到的问题。 底部显示了更正的链接。

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