Добавить класс для ссылки на определенных страницах

У меня есть два маршрута, которые вложены в один и тот же ресурс, например:

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>

Это, очевидно, связано с dashboard.foo. Однако эта ссылка также должна быть активной на dashboard.bar. Он должен указывать на dashboard.foo вместо dashboard.

Я пробовал создать вычисляемое свойство в контроллере приложения, например ответ на этот вопрос, но 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')
});

Затем я попытался добавить фиктивную ссылку, которая показывала бы, что она активна (как описано на этот вопрос о переполнении стека), но кажется, что вместо этого он запускает сразу два события. Это та попытка:

// 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 как активные, тогда как мне нужно было только первое, чтобы быть активным.