rstacruz / Ractive Promise Alt
Programming Languages
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 betrue
if the promise is still being processed. It will beundefined
as soon as the promise resolves/rejects. -
result
will be the result of a resolved (successful) promise. It will beundefined
when pending or in the case of an error. -
resolved
will betrue
when the progress resolves and aresult
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 beundefined
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