ember-deferred-content

Fancy pants handling of async content

ember install ember-deferred-content

Usage

  {{! This assumes that post has an async relationship called comments}}
  {{#deferred-content post.comments as |d|}}
    {{#d.settled}}
      <h2>Comments</h2>
    {{/d.settled}}
    {{#d.pending}}
      <img src="spinner.gif">
    {{/d.pending}}
    {{#d.fulfilled as |comments|}}
      <ul>
        {{#each comments as |comment|}}
          <li>{{comment.author}} said: {{comment.body}}
        {{/each}}
      </ul>
    {{/d.fulfilled}}
    {{#d.rejected as |reason|}}
      Could not load comments: {{reason}}
    {{/d.rejected}}
  {{/deferred-content}}
 
  {{! or using ifs}}
  {{#deferred-content promise=post.comments as |d|}}
    {{#if d.isSettled}}
      <h2>Comments</h2>
    {{/if}}
    {{#if d.isPending}}
      <img src="spinner.gif">
    {{/if}}
    {{#if d.isFulfilled}}
      <ul>
        {{#each d.content as |comment|}}
          <li>{{comment.author}} said: {{comment.body}}
        {{/each}}
      </ul>
    {{/if}}
    {{#if d.isRejected}}
      Could not load comments: {{d.content}}
    {{/if}}
  {{/deferred-content}}

ember-deferred-content takes the promise you need to resolve to show your content, and yields 4 subcomponents that you can use to show content during the different states of your promise

• d.settled: displays the content when the promise is resolved or rejected
• d.pending: displays the content before the promise is resolved or rejected
• d.fulfilled: displays the content only when the promise is resolved; yields the result of the promise
• d.rejected: displays the content only when the promise is rejected; yields the result of the promise

It also sets a series of flags:

• d.isSettled: true if the promise is resolved or rejected
• d.isPending: true until the promise is resolved or rejected
• d.isFulfilled: true if the promise is resolved
• d.isRejected: true if the promise is rejected
• d.content: the return value of the resolved/rejected state

Compatibility

This addon will work on Ember versions 2.3.x and up only, due to use of contextual components and the (hash helper.

Developing

• git clone this repository
• npm install
• bower install

Running Tests

• npm test (Runs ember try:testall to test your addon against multiple Ember versions)
• ember test
• ember test --server