ractive-promise-alt

ractive-promise-alt

Adaptor for Ractive that allows you to watch for a Promise's result and status.

Find more Ractive.js plugins at docs.ractivejs.org/latest/plugins

/* here's a function that returns a promise. */
function getUser() {
  return $.get('/api/user');
}

r = new Ractive({
  adapt: ['promise-alt']
});

/* you'll then be able to consume the promise via ractive.set. */
r.set('user', getUser());

In your template, you'll be able to inspect the promise's result (on success) or error message (on reject). You'll also be able to figure out the status of the promise.

<div>
  {{#user}}
    {{#pending}}
      Loading...
    {{/pending}}

    {{#result}}
      Hello, {{first}} {{last}}!
    {{/result}}

    {{#error}}
      An error occured: {{.}}
    {{/error}}
  {{/user}}
</div>

API

This adaptor sets the following keys:

• pending
  will be true if the promise is still being processed. It will be undefined as soon as the promise resolves/rejects.

• result
  will be the result of a resolved (successful) promise. It will be undefined when pending or in the case of an error.

• resolved
  will be true when the progress resolves and a result is available. This allows you to inspect the status of a promise without consuming its result value.

• error
  will be the result of a rejected (failing) promise. It will be undefined when pending or if the promise resolves.

• progress
  if the promise emits a progress update, the progress is reported here. This is only available when a Promise is still pending.

Differences

This is an alternate adaptor to Ractive-adaptors-Promise. ractive-promise-alt provides a few more features:

• Status reporting
• Progress events
• Errors are treated differently from results

Usage

ractive-promise-alt is available via npm.

$ npm install --save ractive-promise-alt

CommonJS usage: Require the module to use it. It automatically registers itself into either window.Ractive or require('ractive'), whichever's available. No need to use the return value.

require('ractive-promise-alt');

Standalone usage: For those not using npm, it's also available as a standalone .js file. Be sure to include it after ractive.js.

Credits

Based off lluchs/Ractive-adaptors-Promise.

Thanks

ractive-promise-alt © 2014+, Rico Sta. Cruz. Released under the MIT License.
Authored and maintained by Rico Sta. Cruz with help from contributors (list).

ricostacruz.com  ·  GitHub @rstacruz  ·  Twitter @rstacruz