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

Question

我注意到在使用 EmberJS 时，如果您所在的路由与页面上具有相同路径的链接匹配，它会自动采用“活动”类。

我目前正在构建一个使用它的导航栏，但我担心并非所有路线都与我的导航栏匹配。

例如，当我在路线/messages 中时，我想让项目/services 处于活动状态。 或者当我在路线/forums/history 中时，我想让项目/forums/archives 处于活动状态。即使这条路线不在导航中，我也想突出显示与之相关的项目。

我的导航是从一个看起来像这样的 json 对象生成的：

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

我有几个我不喜欢的想法，这就是为什么我来这里征求你的建议。以下是我的想法：

• 在视图中定义一个属性，以定义导航中应处于活动状态的项目：

观点/论坛/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');
  });
});

你有什么更好的建议来做这样的事情吗？ 谢谢

Answer 1

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

从 ember 1.8 开始，current-when 可以接受以空格分隔的路由字符串。如需在 1.7 中运行的实现，请查看 Is there a way to pass an array to currentWhen in EmberJS?

Answer 2

我这样做的方法是在我的应用程序控制器中设置属性。

（假设您的导航栏模板位于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 的计算结果为真，这会将active 类添加到<li>。