javascript - Ember.js で classNameBindings を使用してクラス名を切り替える

Question

私は emberjs が初めてで、classNameBindings の仕組みを理解するのに少し苦労しています。

ここに私の現在の設定があります - http://jsfiddle.net/inquen/AXza5/

(これがどのように機能するかです: http://jsfiddle.net/inquen/N4WJS/ )

テンプレート

<script type="text/x-handlebars">
<div class="main-container">
 <div class="doors">
 {{#view StandClear.DoorView class="left-door"}}<div class="door-window"></div>{{/view}}
 {{#view StandClear.DoorView class="right-door"}}<div class="door-window"></div>{{/view}}
</div>
<div class="door-closure-lamp"></div>
{{#view StandClear.DoorStateView}}
  Toggle Doors
{{/view}}
</div>
</script>​

StandClear = Ember.Application.create();

JavaScript

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();
 }
});

クラス名バインディングは、ページが読み込まれるときに機能しますが、バインドされている値が変更されても変更されません。

私のコードにも構造的な問題がいくつかあると感じています。これについてもフィードバックをいただければ幸いです。