Skip to content

Instantly share code, notes, and snippets.

@mike-north
Last active March 10, 2020 17:09
Show Gist options
  • Save mike-north/693877ab1b0eff7e1ca6d864c604488b to your computer and use it in GitHub Desktop.
Save mike-north/693877ab1b0eff7e1ca6d864c604488b to your computer and use it in GitHub Desktop.
async/await in Ember Routes
import Ember from 'ember';
const DATA_URL = 'https://api.github.com/orgs/emberjs/repo';
export default Ember.Route.extend({
// Values returned from async function are Promises
model: async function() {
// Get the data, AND WAIT FOR IT TO RETURN (type: Object)
var data = await $.getJSON(DATA_URL);
// Massage the JSON
return data.map((repoData) => {
return {
name: repoData.name,
stars: repoData.stargazers_count,
watchers: repoData.watchers_count,
forks: repoData.forks
}
});
}
});
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
.badge {
font-size: 0.6rem;
display: inline-block;
text-transform: uppercase;
margin: 3px 4px 0px 1px;
background: #33f;
color: #fff;
border-radius: 3px;
padding: 1px 2px;
}
<h1>Mike's async/await in Ember demo</h1>
<ul>
{{#each model as |repo| }}
<li>
{{repo.name}}
[
⭐️<span class='badge'>{{repo.stars}}</span>
👀<span class='badge'>{{repo.watchers}}</span>
🍴<span class='badge'>{{repo.forks}}</span>
]
</li>
{{/each}}
</ul>
{
"version": "0.10.6",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"babel-polyfill": "https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.16.0/polyfill.js",
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "2.9.0",
"ember-data": "2.9.0",
"ember-template-compiler": "2.9.0",
"ember-testing": "2.9.0"
},
"addons": {}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment