title: Assigning 'active' class to selected list item in EmberJS
body: <p>I have a list and I'd like to set one item as class="active" automatically.  Given the following bootstrap code:</p>
  
  <pre><code>&lt;ul class="nav"&gt;
  &lt;li {{bindAttr class="atIndex:active"}}&gt;{{#linkTo "index"}}Index{{/linkTo}}&lt;/li&gt;
  &lt;li {{bindAttr class="atAbout:active"}}&gt;{{#linkTo "about"}}About{{/linkTo}}&lt;/li&gt;
  &lt;li {{bindAttr class="atLogin:active"}}&gt;{{#linkTo "login"}}Login{{/linkTo}}&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>atIndex, atAbout and atLogin reside in my ApplicationController.</p>
  
  <p>To render as:</p>
  
  <pre><code>&lt;ul class="nav"&gt;
  &lt;li class="active"&gt;&lt;a...&gt;Index{{/linkTo}}&lt;/li&gt;
  &lt;li&gt;&lt;a...&gt;About&lt;a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a...&gt;Login&lt;a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>What's the best way to do this with Ember 1.0 pre4?  I'd rather not add special code to every view or controller.</p>
  
  <p>PS - <code>atIndex: true</code> works, but <code>atIndex: function() {return true; }.property().volatile()</code> does not. Which makes me think I'm doing something wrong.</p>
  
  <p>Thank you!</p>