Adaptor for Ractive.js to support promises
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test
.gitignore
.travis.yml
HISTORY.md
LICENSE
README.md
index.js
package.json

README.md

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

Status

/* 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

npm version

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