如何只在当前路由上挂上 "active" class？

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' })
    })
  })
}),

我对 class "active" 有疑问。

举个例子，这个 link:

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

在这种情况下，class "active" 将在两个 link 上挂起 - 在 posts.show.files.images 和 posts.show 上挂起。

如何使 class "active" 仅供 posts.show.files.images 使用？

加法

显然问题不仅仅在于 class "active"。但是有了模板。 children 使用 "show" 模板。

能否请您解释一下如何正确描述此类嵌套路由？

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' })
    })
  })
}),

当您定义 link-to 路径时，我将假定您完全按照它看起来的方式指定它，而不是使用隐藏索引。

# 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 显示了您遇到的问题的示例。顶部显示您遇到的问题。底部显示更正后的 links.

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

如何只在当前路由上挂上 "active" class？

How can I hang the "active" class only on the current route?

javascript

ember.js

ember-router