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

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

我执行此操作的方法是在应用程序控制器中设置属性。

（这假设您的导航栏模板位于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>ifisForums评估为 true 的情况中。