title: EmberJS, understanding DS Model life cycle
body: <p>I am trying to monitor the state changes on my DS Models.</p>
  
  <p>I have found interesting flags in the documentation:</p>
  
  <ul>
  <li><a href="http://emberjs.com/api/data/classes/DS.Model.html#property_isLoading" rel="noreferrer">isLoading</a></li>
  <li><a href="http://emberjs.com/api/data/classes/DS.Model.html#property_isReloading" rel="noreferrer">isReloading</a></li>
  <li><a href="http://emberjs.com/api/data/classes/DS.Model.html#property_isSaving" rel="noreferrer">isSaving</a></li>
  </ul>
  
  <p>And they work properly in the templates, I can play with the <code>{{#if model.isLoading}}Is Loading{{/if}}</code>, for example.</p>
  
  <p>But what is very disturbing is that the <em>observers</em> in these flags have a very random behavior. For example I have found that the <em>observer</em> over the flat <code>isSaving</code> doesn't work at all. But the <em>observer</em> over the flag <code>isReloading</code> works perfectly.</p>
  
  <p>Here I have a full example of what I'm have tried until now. I have included this <em>Mixin</em> into my <em>Model</em>:</p>
  
  <pre><code>// app/models/mixins/loading-monitoring
  import Ember from 'ember';
  
  export default Ember.Mixin.create({
    isReloadingDidChange: Ember.observer('isReloading', function() {
      console.log('LOG: isReloadingDidChange', this.get('id'), this.get('isReloading'));
    }),
  
    isSavingDidChange: Ember.observer('isSaving', function() {
      console.log('LOG: isSavingDidChange', this.get('id'), this.get('isSaving'));
    }),
  
    isLoadingDidChange: Ember.observer('isLoading', function() {
      console.log('LOG: isLoadingDidChange', this.get('id'), this.get('isLoading'));
    }),
  
    isLoadedDidChange: Ember.observer('isLoaded', function() {
      console.log('LOG: isLoadedDidChange', this.get('id'), this.get('isLoaded'));
    }),
  
    onInit: Ember.on('init', function() {
      console.log('LOG: init', this.get('id'));
    }),
  
    onDidLoad: Ember.on('didLoad', function() {
      console.log('LOG: onDidLoad', this.get('id'));
    }),
  });
  </code></pre>
  
  <p>And I try to invoke all these <em>observers</em> but only some ones are triggered:</p>
  
  <pre><code>&gt; $E.toString()
    "&lt;reports-dashboard-client-app@route:application::ember1553&gt;"
  &gt; var report; $E.store.findRecord('report', 14).then(function(r) { report = r });
    Promise {_id: 438, _label: undefined, _state: undefined, _result: undefined, _subscribers: Array[0]}
    LOG: init 14
    XHR finished loading: GET "http://myapi.com/reports/14".
    LOG: onDidLoad 14
  &gt; report.toString()
    "&lt;reports-dashboard-client-app@model:report::ember1554:14&gt;"
  &gt; report.get('title')
    "new title"
  &gt; report.set('title', 'title modified')
    "title modified"
  &gt; report.save()
    Class {__ember1453996199577: null, __ember_meta__: Meta}
    XHR finished loading: PUT "http://myapi.com/reports/14".send 
  &gt; report.reload()
    LOG: isReloadingDidChange 14 true
    Class {__ember1453996199577: null, __ember_meta__: Meta}
    XHR finished loading: GET "http://myapi.com/reports/14".send
    LOG: isReloadingDidChange 14 false
  </code></pre>
  
  <p>What am I missing?<br>
  What is the way to observe the state of the Model and react to changes: <em>loading</em>, <em>ready</em>?</p>