title: Create a <li class="active"> around an active {{linkTo}}
body: <p>What is the cleanest way to get <code>&lt;li class="active"&gt;</code> for the active page in the following Ember app?</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;script type="text/x-handlebars"&gt;
    &lt;ul class="nav"&gt;
      &lt;li&gt;{{#linkTo 'ping'}}Ping{{/linkTo}}&lt;/li&gt;
      &lt;li&gt;{{#linkTo 'pong'}}Pong{{/linkTo}}&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>App = Ember.Application.create()
  
  App.Router.map(function() {
    this.route("ping", { path: "/ping" });
    this.route("pong", { path: "/pong" });
  });
  </code></pre>