Create a
around an active {{linkTo}}

Question

What is the cleanest way to get <li class="active"> for the active page in the following Ember app?

index.html

<script type="text/x-handlebars">
  <ul class="nav">
    <li>{{#linkTo 'ping'}}Ping{{/linkTo}}</li>
    <li>{{#linkTo 'pong'}}Pong{{/linkTo}}</li>
  </ul>
</script>

app.js

App = Ember.Application.create()

App.Router.map(function() {
  this.route("ping", { path: "/ping" });
  this.route("pong", { path: "/pong" });
});

Related: http://stackoverflow.com/q/14412073/923560 – Abdull Feb 25 '14 at 16:35 — Abdull, Feb 25 '14 at 16:35

score 12 · Answer 1 · answered Sep 05 '13 at 07:42

12

This workaround did it for me:

{{#linkTo  'menus.search' tagName='li' href=false}}
    {{#linkTo 'menus.search'}}
        <i class="icon-search"></i>
    {{/linkTo}}
{{/linkTo}}

It creates an li element containing an anchor element. And both will be updated with the "active" class when the route is active.

answered Sep 05 '13 at 07:42

Mutual Exception

1,240
12
27

1

Works great with bootstrap tabs. Thanks! – Sarus Jul 04 '14 at 11:37

intuitivepixel · Accepted Answer · 2013-05-05T02:01:43.177

8

replace in your template the li tags like so:

index.html

<script type="text/x-handlebars">
  <ul class="nav">
    {{#linkTo 'ping' tagName="li"}}Ping{{/linkTo}}
    {{#linkTo 'pong' tagName="li"}}Pong{{/linkTo}}
  </ul>
</script>

the {{linkTo}} with the tagName specified will apply a css class name of 'active' automatically when the application's current route matches the supplied route name.

example, when your app url is at /#/ping the resulting markup would be something like:

 ...
 <li class="active">Ping</li>
 ...

Or you create a custom view

App.ItemView = Ember.View.extend({
  tagName: 'li',
  classNameBindings: ['active'],

  active: function() {
    return this.get('childViews.firstObject.active');
  }.property()
});

and then use it like so

 <script type="text/x-handlebars">
   <ul class="nav">
   {{#view App.ItemView}}
     {{#linkTo 'ping'}}Ping{{/linkTo}}
   {{/view}}
   {{#view App.ItemView}}
     {{#linkTo 'pong'}}Pong{{/linkTo}}
   {{/view}}
   </ul>
 </script>

some css to see it actually working

li a {
  color: #000; 
}
li a.active {
  color: #f00;
}

hope it helps

edited May 05 '13 at 02:01

answered May 05 '13 at 01:35

intuitivepixel

23,302
3
57
51

I was hoping to tackle this one with a "simple" `bindattr` within the `
` element. It seems to be an awful lot of code for such a simple thing.

wintermeyer

May 05 '13 at 11:58

The `tagName` property of the `{{#linkTo}}` is all you really need. Creating the custom view is not necessary. – mehulkar May 05 '13 at 19:17

@MehulKar I already mentioned this, thus the two options in my answer :) but you are right the first solution is the easier one – intuitivepixel May 05 '13 at 20:32

Yup :) I was just reiterating in response to @wintermeyer's comment. – mehulkar May 06 '13 at 00:37

1

@MehulKar The `tagName` doesn't help me. I need to have a `` within the `

` and I need the `

` to be with a `class='active'`. Plus I can't change the CSS.

– wintermeyer May 06 '13 at 19:10

score 2 · Answer 3 · edited Apr 22 '16 at 00:37

2

Just nest the {{link-to}} with a tagName on the outer one. This will set an active class on both the outer <li> and the inner <a> tag.

{{#link-to "ping" tagName="li"}}
    {{#link-to "ping"}}ping{{/link-to}}
{{/link-to}}

{{#link-to "pong" tagName="li"}}
    {{#link-to "pong"}}pong{{/link-to}}
{{/link-to}}

edited Apr 22 '16 at 00:37

Fabio says Reinstate Monica

5,271
9
40
61

answered Apr 21 '16 at 23:30

Chris Carey

41
2

Create a
around an active {{linkTo}}

3 Answers3

Linked

Create a around an active {{linkTo}}

3 Answers3

Linked

Create a
around an active {{linkTo}}