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

类名绑定在页面加载时起作用，但在绑定到的值更改时不会更改。

我觉得我的代码也存在许多结构性问题，我也很感激对此的一些反馈。