Create a <li class="active"> around an active {{linkTo}} - ember.js

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" });
});

Answer 1

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.

Answer 2

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

Answer 3

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