Change "active" class in Ember.js "linkTo" helper

by Hari Menon

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.3.1/jquery.cookie.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <div class="container">
      <h2>Index</h2>
      {{outlet}}
    </div>
    <div>
        {{#linkTo main}}Main{{/linkTo}} {{#linkTo sub}}Sub{{/linkTo}}
    </div>
</script>

<script type="text/x-handlebars" data-template-name="sub">
    <div id="sub">
        <h3>Sub</h3>
    </div>
</script>

<script type="text/x-handlebars" data-template-name="main">
  <div id="main">
    <h3>Main</h3>      
  </div>
</script>

CSS

a.active{
    color: #ff0000;
}

JavaScript

var App = Ember.Application.createWithMixins({
    LOG_TRANSITIONS: true,
    init: function () {
        this.deferReadiness();
        this._super();
    }
});

App.Router.map(function () {
    this.resource('main');
    this.resource('sub');
});

App.advanceReadiness();