How to set active menubar item in ember.js

Question

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.

score 4 · Answer 1 · answered Aug 23 '14 at 13:07

4

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>

answered Aug 23 '14 at 13:07

Melvin

5,798
8
46
55

This is a better solution than nesting an anchor tag because when opening the link in a new tab it maintains the URL. – Charlie Jan 13 '17 at 18:22

score 2 · Accepted Answer · edited Dec 13 '13 at 08:47

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.

score 1 · Answer 3 · edited May 23 '17 at 12:16

1

actually see yehuda's answer,

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

edited May 23 '17 at 12:16

Community

1
1

answered Dec 12 '13 at 16:54

Kingpin2k

47,277
10
78
96

That doesnt produce a link! – bookthief Dec 12 '13 at 17:08

score 1 · Answer 4 · answered Apr 24 '14 at 00:46

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 'childViews.@each.active'

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

Usage:

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

How to set active menubar item in ember.js

4 Answers4