Ember-deferred-content

application.controller.js

import Ember from 'ember';

const { RSVP } = Ember;

export default Ember.Controller.extend({
  promise: null,
  resolve: null,
  reject: null,
  
  init() {
    this._super(...arguments);
    
    this.setupPromise();
  },
  
  setupPromise() {
    let deferred = RSVP.defer();
    this.set('promise', deferred.promise);
    this.set('resolve', deferred.resolve);
    this.set('reject', deferred.reject);
  },
  
  actions: {
    resetPromise() {
      this.setupPromise();
    },
    
    resolvePromise() {
      this.get('resolve')('Some stuff from the resolved promise');
    },
    
    rejectPromise() {
      this.get('reject')('Some reason from reject');
    }
  }
});

application.template.hbs

<h1>ember-deferred-content example</h1>

<button {{action "resetPromise"}}>Reset Promise</button>
<br>
<button {{action "rejectPromise"}}>Reject Promise</button>
<br>
<button {{action "resolvePromise"}}>Resolve Promise</button>
<br>

{{#deferred-content promise=promise as |d|}}
  {{#d.settled}}<h2>Your content!</h2>{{/d.settled}}
  {{#d.pending}}Loading your content...{{/d.pending}}
  {{#d.rejected as |reason|}}<strong>Could not load your content:</strong> {{reason}}{{/d.rejected}}
  {{#d.fulfilled as |stuff|}}<strong>Loaded:</strong> {{stuff}}{{/d.fulfilled}}
{{/deferred-content}}

deferred-content.fulfilled-content.component.js

import Ember from 'ember';

const {
  Component,
  computed,
  set
} = Ember;

export default Component.extend({
  promise: computed({
    set(key, promise) {
      set(this, 'isFulfilled', false);
      set(this, 'result', null);

      promise.then((result) => {
        set(this, 'isFulfilled', true);
        set(this, 'result', result);

        return result;
      });

      return promise;
    }
  })
});

deferred-content.fulfilled-content.template.hbs

{{#if isFulfilled}}{{yield result}}{{/if}}

deferred-content.pending-content.component.js

import Ember from 'ember';

const {
  Component,
  computed,
  set
} = Ember;

export default Component.extend({
  promise: computed({
    set(key, promise) {
      set(this, 'isSettled', false);

      promise.finally(() => {
        set(this, 'isSettled', true);
      });

      return promise;
    }
  })
});

deferred-content.pending-content.template.hbs

{{#unless isSettled}}{{yield}}{{/unless}}

deferred-content.rejected-content.component.js

import Ember from 'ember';

const {
  Component,
  computed,
  set
} = Ember;

export default Component.extend({
  promise: computed({
    set(key, promise) {
      set(this, 'isRejected', false);
      set(this, 'result', null);

      promise.catch((result) => {
        set(this, 'isRejected', true);
        set(this, 'result', result);
      });

      return promise;
    }
  })
});

deferred-content.rejected-content.template.hbs

{{#if isRejected}}{{yield result}}{{/if}}

deferred-content.settled-content.component.js

import Ember from 'ember';

const {
  Component,
  computed,
  set
} = Ember;

export default Component.extend({
  promise: computed({
    set(key, promise) {
      set(this, 'isSettled', false);

      promise.finally(() => {
        set(this, 'isSettled', true);
      });

      return promise;
    }
  })
});

deferred-content.settled-content.template.hbs

{{#if isSettled}}{{yield}}{{/if}}

deferred-content.template.hbs

{{yield (hash pending=(component 'deferred-content/pending-content' promise=promise)
              fulfilled=(component 'deferred-content/fulfilled-content' promise=promise)
              rejected=(component 'deferred-content/rejected-content' promise=promise)
              settled=(component 'deferred-content/settled-content' promise=promise)
        )
}}

twiddle.json

{
  "version": "0.5.3",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.3.1/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.3.3/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.2.0/ember-template-compiler.js"
  }
}