Skip to content

Instantly share code, notes, and snippets.

@PoslinskiNet
Last active October 21, 2018 14:37
Show Gist options
  • Save PoslinskiNet/e6d4e118680e6d22f4067d9f7c074909 to your computer and use it in GitHub Desktop.
Save PoslinskiNet/e6d4e118680e6d22f4067d9f7c074909 to your computer and use it in GitHub Desktop.
Ember Concurrency Demo
import Ember from 'ember';
import { task, timeout } from 'ember-concurrency';
import { isBlank } from '@ember/utils';
const DEBOUNCE_MS = 250;
const API_URL = 'https://api.github.com/search/users?q=';
export default Ember.Component.extend({
searchUsers: task(function * (term) {
if (isBlank(term)) { return []; }
yield timeout(DEBOUNCE_MS);
let fetchResponse = yield fetch(`${API_URL}${term}`);
let json = yield fetchResponse.json();
return json.items;
}).restartable()
});
import Ember from 'ember';
export default Ember.Controller.extend({
});
{{github-user-search}}
<!-- app/components/github-user-search/template.hbs -->
<input type="text" oninput={{perform searchUsers value="target.value"}}
placeholder="Search user on GitHub" />
{{#if searchUsers.isRunning}}
Loading...
{{/if}}
<ul>
{{#each searchUsers.lastSuccessful.value as |user|}}
<li>
<img src="{{user.avatar_url}}" width="50" />
{{user.login}}
</li>
{{/each}}
</ul>
{
"version": "0.15.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
"ember": "3.4.3",
"ember-template-compiler": "3.4.3",
"ember-testing": "3.4.3"
},
"addons": {
"ember-data": "3.4.2",
"ember-concurrency": "0.8.22"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment