Как установить активный элемент меню в ember.js

Question

У меня есть приложение ember с бутстрапом. По умолчанию кнопка «Дом» отображается как активный параметр и является синим. Как изменить активный параметр на основе выбранной ссылки?

<ul class="nav nav-pills nav-stacked" style="max-width: 300px;"> 
     <li class="active"> 
     <a href="#"{{#link-to "index"}}<span class="glyphicon glyphicon-home"></span> &nbsp &nbsp Home {{/link-to}}</a> 
     </li>  
     <li> 
     <a href="#"{{#link-to "settings"}}<span class="glyphicon glyphicon-wrench"></span> &nbsp &nbsp Settings {{/link-to}}</a> 
     </li> 
     <li> 
     <a href="#"<span class="glyphicon glyphicon-arrow-right"></span> Logout</a> 
     </li> 
</ul> 

EDIT: По http://emberjs.com/guides/routing/defining-your-routes/ помощник link-to должен позаботиться об этом автоматически

EDIT: Я пытался экспериментировать с following-

в

<ul class="nav"> 
    {{#linkTo 'index' tagName="li"}}Home{{/linkTo}} 
    {{#linkTo 'settings' tagName="li"}}Settings{{/linkTo}} 
    </ul> 

, потому что согласно странице Ember ссылка выше, атрибут tagName отвечает за назначение активного класса, но он не работает для меня.

Answer 1

link-to по умолчанию создает <a> элемент и установите класс active, когда текущий маршрут соответствует целевому маршруту ссылки. Бутстрап ожидает, что класс active будет присутствовать в теге li. И элемент <a> внутри.

Таким образом, вам необходимо использовать {{#link-to ... tagName="li"}}, как ваш второй aproach и внутри элемента <a>. В противном случае стиль не применяется.

Как это:

<ul class="nav nav-pills nav-stacked" style="max-width: 300px;"> 
    {{#link-to "index" tagName="li"}} 
    <a href="#"><span class="glyphicon glyphicon-home"></span> &nbsp &nbsp Home</a> 
    {{/link-to}}  
    {{#link-to "settings" tagName="li"}} 
    <a href="#"><span class="glyphicon glyphicon-wrench"></span> &nbsp &nbsp Settings</a> 
    {{/link-to}} 
    {{#link-to "logout" tagName="li"}} 
    <a href="#"><span class="glyphicon glyphicon-arrow-right"></span> Logout</a> 
    {{/link-to}} 
</ul> 

Увидеть это в действии http://jsfiddle.net/marciojunior/E63Hy/

Единственного недостаток этого, ваши HREF не будет соответствовать целевому маршруту, он фиксируется с href="#". Потому что, когда имя тега link-to отличается от a, href не генерируется. Так что даже <a href="{{href}}"> не работает. Конечно, это просто визуально, щелчок по ссылке - переход на целевой маршрут и обновление URL соответственно.

Answer 2

реально увидеть ответ Иегуда, в

How do I bind to the active class of a link using the new Ember router?

Answer 3

Я только что написал компонент, чтобы сделать это немного лучше:

App.LinkLiComponent = Em.Component.extend 
    tagName:   'li' 
    classNameBindings: ['active'] 
    active:    (-> 
    @get('childViews').anyBy 'active' 
).property 'childViews.@each.active' 

Em.Handlebars.helper 'link-li', App.LinkLiComponent 

Использование:

{{#link-li}} 
    {{#link-to "someRoute"}}Click Me{{/link-to}} 
{{/link-li}} 

Answer 4

Решение на самом деле просто. Просто оберните свою обычную ссылку с помощью другой ссылки с помощью tagName = "li".

<ul class="nav"> 
    {{#link-to 'index' tagName="li"}} 
     {{#link-to 'index'}} 
      Home 
     {{/link-to}} 
    {{/link-to}} 
    {{#link-to 'settings' tagName="li"}} 
     {{#link-to 'settings'}} 
      Settings 
     {{/link-to}} 
    {{/link-to}} 
</ul>