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

类名绑定在加载页面时有效，但在绑定的值发生更改时不会更改。

我觉得我的代码也有很多结构性问题，我也很感激这方面的一些反馈。