Установить активный класс на Bootstrap Nav-таблетки

Question

Я использую .nav-pills для создания элементов пользовательского интерфейса, чтобы выбрать маршрут в мое приложение, как это:

<ul class="nav nav-pills"> 
    {{#each item in model}} 
     <li class="dropdown"> 
      <a class="dropdown-toggle" href="#" data-toggle="dropdown"> 
       {{item.name}}<b class="caret"></b> 
      </a> 
      <ul class="dropdown-menu"> 
       {{#each child in item.children}} 
        <li>{{#link-to 'child' item child}}{{child.name}}{{/link-to}}</li> 
       {{/each}} 
      </ul> 
     </li> 
    {{/each}} 
</ul> 

Он отлично работает, но я не могу понять, какое-то время чтобы получить li.dropdown, чтобы иметь .active. Я попытался использовать вспомогательный помощник link-to и установил его на родительский маршрут, но это не работает.

Любые идеи, как заставить это работать?

Answer 1

Сразу после публикации этого вопроса мне стало известно, что я использовал маршрут item.index для link-to, который я использовал для li.dropdown. Я изменил его на item, и теперь он отлично работает.

Резюмируя:

<ul class="nav nav-pills"> 
    {{#each item in model}} 
     {{#link-to 'item' item tagName='li' classNames="dropdown"}} 
      <a class="dropdown-toggle" href="#" data-toggle="dropdown"> 
       {{item.name}}<b class="caret"></b> 
      </a> 
      <ul class="dropdown-menu"> 
       {{#each child in item.children}} 
        <li>{{#link-to 'child' item child}}{{child.name}}{{/link-to}}</li> 
       {{/each}} 
      </ul> 
     {{#link-to}} 
    {{/each}} 
</ul>