Load data on demand

Search…

Introduction

Getting started

Installation

Guides

API

Misc

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.

Last modified 2yr ago

Copy link