title: Toggling class names using classNameBindings in Ember.js
body: <p>I'm new to emberjs and I'm having a bit of trouble understanding how classNameBindings work. </p>
  
  <p>Here's my current set up - <a href="http://jsfiddle.net/inquen/AXza5/" rel="nofollow">http://jsfiddle.net/inquen/AXza5/</a></p>
  
  <p>(this is how it should work: <a href="http://jsfiddle.net/inquen/N4WJS/" rel="nofollow">http://jsfiddle.net/inquen/N4WJS/</a>)</p>
  
  <p>The template</p>
  
  <pre><code>&lt;script type="text/x-handlebars"&gt;
  &lt;div class="main-container"&gt;
   &lt;div class="doors"&gt;
   {{#view StandClear.DoorView class="left-door"}}&lt;div class="door-window"&gt;&lt;/div&gt;{{/view}}
   {{#view StandClear.DoorView class="right-door"}}&lt;div class="door-window"&gt;&lt;/div&gt;{{/view}}
  &lt;/div&gt;
  &lt;div class="door-closure-lamp"&gt;&lt;/div&gt;
  {{#view StandClear.DoorStateView}}
    Toggle Doors
  {{/view}}
  &lt;/div&gt;
  &lt;/script&gt;​
  
  StandClear = Ember.Application.create();
  </code></pre>
  
  <p>The JavaScript</p>
  
  <pre><code>StandClear.doorController = Ember.Controller.create({
     doorsOpen: true,
     toggleDoors:function(e){
     this.doorsOpen = (this.doorsOpen === false) ? true : false; 
     console.log(this.doorsOpen);
   }
  });
  
  StandClear.DoorView = Ember.View.extend({
     tagName: 'div',
     classNames:['car-door'],
     classNameBindings: 'StandClear.doorController.doorsOpen',
  })
  
  StandClear.DoorStateView = Ember.View.extend({
     tagName: 'button',
     classNames:['door-controller'],
     click:function(e){
     StandClear.doorController.toggleDoors();
   }
  });
  </code></pre>
  
  <p>The class name binding works when the page is loaded, but doesn't change when the value it is bound to changes.</p>
  
  <p>I feel there are a number of structural issues with my code as well, I'd appreciate some feedback on this as well.</p>