EmberJS - 带有观察和属性未更新/触发的 classNameBindings答案

【问题标题】：EmberJS - classNameBindings w/ Observe & Property Not Updating/FiringEmberJS - 带有观察和属性未更新/触发的 classNameBindings
【发布时间】：2014-06-28 18:32:31
【问题描述】：

这是一个非常基本的问题，我一直试图弄清楚它无济于事。我正在将 Google Maps 与 EmberJS 集成，并尝试对 IndexController 中由另一个视图设置的属性执行 classNameBindings。值会正确更新，但不会触发。我已经尝试过属性（'controller.panoEnabled'）和 .observes（'controller.panoEnabled'）。既不火...任何想法？非常感谢您的帮助，对于这个基本问题，我深表歉意。

JSBin：http://emberjs.jsbin.com/degivubu/4/edit

【问题讨论】：

标签： ember.js

【解决方案1】：

对于 Duncan Walker 提到的第二个选项，我建议 isEnabled:Em.computed.alias('controller.panoEnabled')，因为带有 binding 后缀的属性已被“温和地”弃用 (https://github.com/emberjs/ember.js/issues/1164#issuecomment-23200023)。

App.PanoView = Ember.View.extend({
  classNames: ['pano'],
  classNameBindings: ['isEnabled'],
  /*isEnabled:function(){
    return this.get('controller.panoEnabled');
  }.property('controller.panoEnabled')*/
  isEnabled:Em.computed.alias('controller.panoEnabled')
});

另外需要在google地图相关代码中修复this的上下文，如下所示

http://emberjs.jsbin.com/vesiyana/1/edit

....
 var self = this;
    google.maps.event.addListener(marker, 'click', function(){
       self.set('controller.panoEnabled',true); 
      console.log( self.get('controller.panoEnabled') ); });
    google.maps.event.addListener(map, 'click', function(){ 
      self.set('controller.panoEnabled', false); 
      console.log( self.get('controller.panoEnabled') ); });
....

【讨论】：

非常感谢！这绝对是那个/这个上下文。我不敢相信我错过了它，因为它在 Listener 方法中。太棒了，不能感谢你...

【解决方案2】：

试试：

App.PanoView = Ember.View.extend({
  classNames: ['pano'],
  classNameBindings: ['isEnabled'],
  isEnabled: function(){
    return this.get('controller.panoEnabled');
  }.property('controller.panoEnabled'),
});

或

App.PanoView = Ember.View.extend({
  classNames: ['pano'],
  classNameBindings: ['isEnabled'],
  isEnabledBinding: 'App.IndexController.panoEnabled',
});

【讨论】：

我都试过了，都没有更新。但是解决方案melc用那个/这个来解决它！那是最初的问题。不过谢谢！