ember-promise-block's Introduction

ember-promise-block

This is an Ember Addon that exposes a component promise-block which shows a loader while a given promise is being resolved.

Installing

Install as an Ember-CLI addon:

ember install ember-promise-block

Usage

// templates/posts.hbs
{{#promise-block promise=postsPromise loaderTemplate='helpers/loader'}}
  {{#each posts as |post|}}
    {{post.title}}
  {{/each}}
{{/promise-block}}

The component will show the partial in loaderTemplate while promise is not resolved. It then shows the block when it resolves. The default value for loaderTemplate is helpers/loader.

Example controller:

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

export default Ember.Controller.extend({
  postsPromise: function() {
    return this.get('store').query('post');
  }.property(),
  posts: Ember.computed.reads('postsPromise.content')
});

Example model:

// models/post.js
import DS from 'ember-data';

export default DS.Model.extend({
  title: DS.attr('string')
});

Example

Below is a (fast) example of what the addon does. The loader is displayed until the data is loaded, i.e. the Promise gets resolved.

Building yourself

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

ember-promise-block's People

Contributors

Stargazers

Watchers

ember-promise-block's Issues

Doesn't work with raw Ember.RSVP.Promise

The code seems to rely on setting of the isFulfilled property to determine if the promise is complete. Trouble is, this isn't a property of Ember.RSVP.Promise itself, but rather Ember.PromiseProxyMixin.

Ember-Data models use this mixin, so this addon works great for that use-case, but for raw promises (e.g. things returned by Ember-Ajax, in my case), fulfillment is never detected and the loader template is displayed forever.