How to set active menubar item in ember.js

3
votes

I have an ember application with a bootstrap menubar. By default the home button is rendered as being the active option and is blue. How do I change the active option based on what link is selected?

<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: According to http://emberjs.com/guides/routing/defining-your-routes/ the link-to helper is supposed to take care of this automatically

EDIT: I have tried experimenting with the following-

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

because according to the ember page link above, the tagName attribute is responsible for assigning the active class, but it doesnt work for me.

4
twitter-bootstrapember.js

4 Answers

2
votes

The link-to by default creates an <a> element, and set the class active when the current route matches the target route of the link. The bootstrap expects the active class to be present in the li tag. And an <a> element inside.

So you need to use {{#link-to ... tagName="li"}} like your second aproach and inside an <a> element. Otherwise the style isn't applied.

Like this:

<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>

See this in action http://jsfiddle.net/marciojunior/E63Hy/

The only downside of this, is your href won't match the target route, it's fixed with href="#". Because when the link-to tagName is different of a, no href is generated. So even a <a href="{{href}}"> doesn't work. Of course, this is just visual, clicking in the link-to will transition to the target route, and update the url accordingly.

4
votes

The solution is actually simple. Just wrap your usual link-to with another link-to with 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>
1
votes

I have just written a component to make this a bit nicer:

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

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

Usage:

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