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>

如果active评估为真，则会将<li>类添加到isForums。

当路线不匹配时使导航项激活

2 个答案: