Skip to content
This repository has been archived by the owner on Nov 12, 2022. It is now read-only.

danmcclain/ember-deferred-content

Repository files navigation

ember-deferred-content

Fancy pants handling of async content

Greenkeeper badge Build Status npm version

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

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Packages

No packages published