Question

In emberJS, I have a model with an object property called style. I can set it’s properties using test.setPath('style.a'). I am trying to observe the style object but my observe callback is not firing.

You can see the code here.

Answer 1

This basic misunderstanding of how Ember observers work is a common mistake. In your example, you have the following in your view test:

...

style : Ember.Object.create({
    a:4,
    b:2
}),
setStyle : function(key, val){
    var style = this.get('style');
    style[key] = val;
    this.set('style', style);        
},

...

The test.style property is pointing to an Ember.Object and test.setStyle() is changing the value of a given property on that Ember.Object. A common mistake is thinking that resetting a property to the same object will call any observer on it as you’re doing with this line: this.set('style', style). Well that’s not how Ember observers work. Observers in Ember are fired automatically when the actual value of a property has changed. Setting the style property to itself doesn’t change the object style is pointing to, thus it doesn’t change the value of the property (actually that code does nothing at all). In this case it looks like you need to tell Ember manually that the style property has changed. You can do that by calling notifyPropertyChange().

Look at the following modified code for setStyle:

setStyle : function(key, val){
    var style = this.get('style');
    style.set(key, val); // You should always use `.get()` and `.set()`

    this.notifyPropertyChange('style');
}

This will cause your observer to fire.