在特定页面上添加 class 到 link

Question

我有两条嵌套在同一资源下的路由，如下所示：

Router.map(function() {
  this.resource('dashboard', function() {
    this.route('foo');
    this.route('bar');
  });
});

目前，在我的 app/templates/application.hbs 中，我的导航设置如下：

<ul class="nav navbar-nav">
  {{#link-to "dashboard.foo" tagName="li"}}
    <a {{bind-attr href="view.href"}}>Dashboard</a>
  {{/link-to}}
</ul>

显然，link 到 dashboard.foo。但是，link 也需要在 dashboard.bar 上处于活动状态。它必须指向 dashboard.foo 而不是 dashboard.

我试过在应用程序控制器中创建一个计算的属性，就像 this 问题的答案一样，但是 currentPath 从未显示它在仪表板上。这是我的尝试：

export default Ember.Controller.extend({
  isDashboardRoute: function() {
    var routeName = this.get('currentRouteName');
    var currentPath = this.get('currentPath');
    console.log(routeName); // "loading"
    console.log(currentPath); // "loading"
  }.property('currentPath')
});

然后我尝试添加一个虚拟 link- 以显示它处于活动状态（如 this Stack Overflow question 中所述），但它似乎同时触发了两个事件。这是那个尝试：

// application.hbs
{{#link-to "dashboard" tagName="li" href=false eventName="dummy"}}
  {{#link-to "dashboard.foo"}}Dashboard{{/link-to}}
{{/link-to}}

有什么想法吗？

编辑

将下面的答案插入我的代码后，这就是我现在拥有的：

{{#link-to "dashboard.foo" tagName="li" current-when="dashboard"}}
  <a {{bind-attr href="view.href"}}>Dashboard</a>
{{/link-to}}

我不能使用嵌套的 link-to，因为它会将 li 和 a 都标记为活动状态，而我只需要前者处于活动状态。

Answer 1

您可以使用 current-when 属性.

{{#link-to "dashboard" tagName="li" href=false eventName="dummy" current-when="dashboard"}}
  {{#link-to "dashboard.foo"}}Dashboard{{/link-to}}
{{/link-to}}

ember-routing-multi-current-when

还有一个功能标志

在特定页面上添加 class 到 link

Add class to link when on specific pages

ember.js

ember-cli