title: How to update bound class in a collection on event
body: <p>I have a controller that is created by the Ember.Router, and this populates a table.</p>
  
  <p>The template:</p>
  
  <pre><code>{{#each key in controller}}
  
    {{#view App.TestView contentBinding="key"}}
  
    &lt;tr {{bindAttr class="view.isSelected"}} {{action selectKey this on="click" target="view" }}&gt;
      &lt;td&gt;{{key.id}}&lt;/td&gt;
      &lt;td&gt;&lt;button type="button" class="btn btn-danger" {{action removeKey on="click" target="view"}}&gt;Remove&lt;/button&gt;&lt;/td&gt;
    &lt;/tr&gt;
  
    {{/view}}
  
  {{/each}}
  </code></pre>
  
  <p>The code behind:</p>
  
  <pre><code>App.TestView = Em.View.extend({
    removeKey: function () {
      var key = this.get('content');
      this.bindingContext.removeObject(key);
      return false;
    },
    selectKey: function (event) {
      this.set('theClass', 'warning');
    },
    theClass: 'selectable',
    isSelected: function () {
      return this.get('theClass');
    }.property('theClass')
  });
  </code></pre>
  
  <p>I'm expecting the onclick event to change the class to 'warning', and for the row in the collection to be highlighted in yellow (as per a css class), however this does not happen. The <strong>isSelected</strong> property doesn't seem to update the DOM, and I can't see why it doesn't do that.</p>
  
  <p>Jsfiddle here: <a href="http://jsfiddle.net/EsF4R/114/" rel="nofollow">http://jsfiddle.net/EsF4R/114/</a></p>