async-container

async-container

This addon enables a declarative way to react to actions which return a promise. When dealing with actions, it's common to represent the UI state while an async action is resolving. For example, a save button that needs to be disabled while a save request is in flight.

Example Usage

Conditionally disable while promise is resolving

{{!-- templates/example.hbs --}}
{{#action-container (action 'save') as |async|}}
  <button {{action async.invoke}} disabled={{async.inFlight}}>
    {{#if async.inFlight}}
      Saving
    {{else}}
      Save
    {{/if}}
  </button>
{{/action-container}}

Display the results of the promise

The result of the last successful promise result is available on async.result

{{!-- templates/example.hbs --}}
{{#action-container (action 'save') as |async|}}
  {{#if async.result}}
    Thank you {{async.result.username}}
  {{else}}
    <button {{action async.invoke}} disabled={{async.inFlight}}>
      {{#if async.inFlight}}
        Saving
      {{else}}
        Save
      {{/if}}
    </button>
  {{/if}}
{{/action-container}}

// controllers/example.js
import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    save() {
      return this.get('model').save();
    }
  }
});

Installation

• ember install async-container

Running

• ember server
• Visit your app at http://localhost:4200.

Running Tests

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

Building

• ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.