ember-deferred-content
Advanced tools
ember-deferred-content - npm Package Compare versions
Comparing version 0.1.1 to 0.2.0
| import Ember from 'ember'; | ||
| import layout from '../templates/components/deferred-content'; | ||
| const { Component } = Ember; | ||
| const { | ||
| Component, | ||
| computed, | ||
| computed: { not }, | ||
| get, | ||
| set | ||
| } = Ember; | ||
| const DeferredContentComponent = Component.extend({ | ||
| layout | ||
| layout, | ||
| isPending: not('isSettled'), | ||
| promise: computed({ | ||
| set(key, promise) { | ||
| set(this, 'isRejected', false); | ||
| set(this, 'isFulfilled', false); | ||
| set(this, 'isSettled', false); | ||
| set(this, 'content', null); | ||
| promise | ||
| .then((result) => { | ||
| if (!get(this, 'isDestroyed')) { | ||
| set(this, 'isFulfilled', true); | ||
| set(this, 'content', result); | ||
| } | ||
| }, (result) => { | ||
| if (!get(this, 'isDestroyed')) { | ||
| set(this, 'isRejected', true); | ||
| set(this, 'content', result); | ||
| } | ||
| }) | ||
| .finally(() => { | ||
| if (!get(this, 'isDestroyed')) { | ||
| set(this, 'isSettled', true); | ||
| } | ||
| }); | ||
| return promise; | ||
| } | ||
| }) | ||
| }); | ||
@@ -9,0 +44,0 @@ |
| import Ember from 'ember'; | ||
| import layout from '../../templates/components/deferred-content/fulfilled-content'; | ||
| const { | ||
| Component, | ||
| computed, | ||
| set | ||
| } = Ember; | ||
| const { Component } = Ember; | ||
| export default Component.extend({ | ||
| layout, | ||
| promise: computed({ | ||
| set(key, promise) { | ||
| set(this, 'isFulfilled', false); | ||
| set(this, 'result', null); | ||
| promise.then((result) => { | ||
| set(this, 'isFulfilled', true); | ||
| set(this, 'result', result); | ||
| return result; | ||
| }); | ||
| return promise; | ||
| } | ||
| }) | ||
| layout | ||
| }); |
| import Ember from 'ember'; | ||
| import layout from '../../templates/components/deferred-content/pending-content'; | ||
| const { | ||
| Component, | ||
| computed, | ||
| set | ||
| } = Ember; | ||
| const { Component } = Ember; | ||
| export default Component.extend({ | ||
| layout, | ||
| promise: computed({ | ||
| set(key, promise) { | ||
| set(this, 'isSettled', false); | ||
| promise.finally(() => { | ||
| set(this, 'isSettled', true); | ||
| }); | ||
| return promise; | ||
| } | ||
| }) | ||
| layout | ||
| }); |
| import Ember from 'ember'; | ||
| import layout from '../../templates/components/deferred-content/rejected-content'; | ||
| const { | ||
| Component, | ||
| computed, | ||
| set | ||
| } = Ember; | ||
| const { Component } = Ember; | ||
| export default Component.extend({ | ||
| layout, | ||
| promise: computed({ | ||
| set(key, promise) { | ||
| set(this, 'isRejected', false); | ||
| set(this, 'result', null); | ||
| promise.catch((result) => { | ||
| set(this, 'isRejected', true); | ||
| set(this, 'result', result); | ||
| }); | ||
| return promise; | ||
| } | ||
| }) | ||
| layout | ||
| }); |
| import Ember from 'ember'; | ||
| import layout from '../../templates/components/deferred-content/settled-content'; | ||
| const { | ||
| Component, | ||
| computed, | ||
| set | ||
| } = Ember; | ||
| const { Component } = Ember; | ||
| export default Component.extend({ | ||
| layout, | ||
| promise: computed({ | ||
| set(key, promise) { | ||
| set(this, 'isSettled', false); | ||
| promise.finally(() => { | ||
| set(this, 'isSettled', true); | ||
| }); | ||
| return promise; | ||
| } | ||
| }) | ||
| layout | ||
| }); |
| { | ||
| "name": "ember-deferred-content", | ||
| "version": "0.1.1", | ||
| "version": "0.2.0", | ||
| "description": "Fancy pants handling of async content", | ||
@@ -5,0 +5,0 @@ "repository": "https://github.com/danmcclain/ember-deferred-content", |
@@ -33,2 +33,22 @@ # ember-deferred-content | ||
| {{/deferred-content}} | ||
| {{! or using ifs}} | ||
| {{#deferred-content promise=post.comments as |d|}} | ||
| {{#if d.isSettled}} | ||
| <h2>Comments</h2> | ||
| {{/if}} | ||
| {{#if d.isPending}} | ||
| <img src="spinner.gif"> | ||
| {{/if}} | ||
| {{#if d.isFulfilled}} | ||
| <ul> | ||
| {{#each d.content as |comment|}} | ||
| <li>{{comment.author}} said: {{comment.body}} | ||
| {{/each}} | ||
| </ul> | ||
| {{/if}} | ||
| {{#if d.isRejected}} | ||
| Could not load comments: {{d.content}} | ||
| {{/if}} | ||
| {{/deferred-content}} | ||
| ``` | ||
@@ -49,2 +69,10 @@ | ||
| It also sets a series of flags: | ||
| - `d.isSettled`: true if the promise is resolved or rejected | ||
| - `d.isPending`: true until the promise is resolved or rejected | ||
| - `d.isFulfilled`: true if the promise is resolved | ||
| - `d.isRejected`: true if the promise is rejected | ||
| - `d.content`: the return value of the resolved/rejected state | ||
| ## Compatibility | ||
@@ -51,0 +79,0 @@ |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by8.19%
10422
- Number of lines in readme file
- increased by41.18%
96
Worsened metrics
- Lines of code
- decreased by-15.29%
133
No dependency changes