notifyPropertyChange behavior

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  init() {
    this._super(...arguments);
    // this.foo = { bar: { baz: 4 } };
    
    let foo = Ember.Object.create();
    let bar = Ember.Object.create();

    Ember.set(this, 'foo', foo);
    Ember.set(foo, 'bar', bar);
    Ember.set(bar, 'baz', 4);
  },
  
  fooObserver: Ember.observer('foo', function() {
    console.log('foo has changed');
  }),
  
  fooBarObserver: Ember.observer('foo.bar', function() {
    console.log('foo.bar has changed');
  }),
  
  fooBarBazObserver: Ember.observer('foo.bar.baz', function() {
    console.log('foo.bar.baz has changed');
  }),
  
  actions: {
    notifyFoo() {
      this.notifyPropertyChange('foo');
      this.notifyPropertyChange('foo');
    },
    
    notifyBar() {
      let foo = Ember.get(this, 'foo');
      foo.notifyPropertyChange('bar');
    },
    
    notifyBaz() {
      let bar = Ember.get(this, 'foo.bar');
      bar.notifyPropertyChange('baz');
    }
  }
});

templates.application.hbs

<h4>demonstrating notifyPropertyChange behavior</h4>

<p>take a look at your console!</p>

{{log 'foo:' foo}}
{{log 'foo.bar:' foo.bar}}
{{log 'foo.bar.baz:' foo.bar.baz}}

<button type="button" onclick={{action 'notifyFoo'}}>notify foo</button>
<button type="button" onclick={{action 'notifyBar'}}>notify foo.bar</button>
<button type="button" onclick={{action 'notifyBaz'}}>notify foo.baz</button>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}