Load data on demand
With Ember Await you can load your data on-demand (eg. on button click). To do it, we need to use @defer= argument and call the promise using run property.
Remember! this.fetchPosts needs to return a function
1
<Await @defer={{this.fetchPosts}} as |await|>
2
<button {{on "click" await.run}}>Fetch posts</button>
3
4
<await.Initial>
5
No posts are loaded yet
6
</await.Initial>
7
8
<await.Fulfilled as |posts|>
9
{{#each posts as |post|}}
10
{{post.title}}
11
{{/each}}
12
</await.Fulfilled>
13
</Await>
Copied!
This way, the content from await.Initial will be displayed until we click the button and posts will load.
Copy link