时间戳

首页 > 解决方案 > 如何仅在当前路线上挂起“活动”课程？

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

问题描述

我有这样的路线：

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

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

如何让课堂“活跃”只为posts.show.files.images？

添加

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

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

标签： javascriptember.jsember-router

解决方案

您遇到的问题是因为 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}}

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

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

推荐阅读