ember.js - EmberJS - classNameBindings w/ Observe & Property Not Updating/Firing

Question

This is a really basic question and I've been trying to figure it out to no avail. I'm integrating Google Maps with EmberJS and trying to do classNameBindings on a property within the IndexController that is being set by another view. The values get updated properly, but it doesn't fire. I've tried both property('controller.panoEnabled') and also .observes('controller.panoEnabled'). Neither fires... any idea? Help is much appreciated and I apologize for this rudimentary question.

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

Answer 1

I would advise isEnabled:Em.computed.alias('controller.panoEnabled') for the second option mentioned by Duncan Walker, as the property with the binding suffix has been 'softly' deprecated (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')
});

Also it is needed to fix the context of this in the google maps related code as shown below

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') ); });
....