当路由不匹配时，使导航项处于活动状态

Question

当路由不匹配时，使导航项处于活动状态

5

我注意到在使用EmberJS时，如果你所在的路由与页面上相同路径的链接匹配，它会自动添加“active”类。我目前正在构建一个导航栏，它正在使用此功能，但我的担忧在于，并非所有的路由都与我的导航栏匹配。例如，当我在路由“/messages”中时，我想让项目“/services”处于活动状态。或者当我在路由“/forums/history”中时，我想让项目“/forums/archives”处于活动状态。即使这个路由没有在导航栏中，我也想突出显示与它相关的项目。我的导航是从看起来像这样的JSON对象生成的：

[
  {
    "label": "Forums",
    "link": "forums",
    "children": [
      {
        "label": "Latest"
        "link": "forums.latest"
      }
      {
        "label": "Archives"
        "link": "forums.archives"
      }
    ]
  }
]

我有几个想法，但我不太喜欢，所以我来这里听听你的建议。以下是我的想法：

在视图中定义一个属性，以定义导航中应该激活哪个项目：

views/forums/history.js：

Ember.View.extend({
  navigationActiveItem: 'forums.archives'
});

在我的json对象中定义将突出显示该项的链接列表

json文件:

[
  {
    "label": "Forums",
    "link": "forums",
    "children": [
      {
        "label": "Archives"
        "link": "forums.archives",
        "makeActive": ["forums.history", "forums.records"] //If you are on one of those route, it will active forums.archives
      }
    ]
  }
]

router.js:

Router.map(function () {
  this.route('forums', function () {
    this.route('latest');
    this.route('archives');
    this.route('history');
  });
});

你有任何更好的建议来完成这件事吗？谢谢

- alexmngn

你能添加你的路由器代码吗？如果它们被正确嵌套，导航栏将获得活动类。 - Patsy Issa

我用路由器编辑了这个问题。 - alexmngn

历史与存档有什么关系？服务和消息在哪里？ - Patsy Issa

这些只是我需要的例子。服务和信息与论坛处于同一级别。历史与档案相关，因为我希望如此。 - alexmngn

嵌套路由是一种选择吗？ - Patsy Issa

不好意思，这不是一个选项。 - alexmngn

2个回答

1

我实现这个的方法是在我的应用控制器中设置属性。

（假设您的导航栏模板位于application.handlebars中）

例如，如果您想要您的“论坛”选项卡在任何forums路由上处于活动状态，则可以创建一个名为isForums的属性，它看起来像这样：

isForums: function(){
  return this.get('currentPath').split('.')[0] === 'forums';
}.property('currentPath')

您可以这样从application.handlebars访问它：

<li {{bind-attr class="isForums:active"}}>
  {{#link-to "forums"}}Forums{{/link-to}}
</li>

如果isForums为真，这将向<li>添加active类。

- AJ Gregory

这种方法的问题在于，当您拥有一个拥有数百个页面的网站时，为所有需要定义的页面计算属性变得混乱。 - alexmngn

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andreas Andreou · Accepted Answer

使用{{#link-to}}的current-when参数。它允许您定义替代路由，使链接处于活动状态。

自从Ember 1.8以来，current-when可以接受一个空格分隔的路由字符串。有一个在1.7中可用的实现，请查看Is there a way to pass an array to currentWhen in EmberJS?。