Migrate from routes

Search…
Introduction
Getting started
Installation
Guides
API
Misc
Migrate from routes
Imagine we want to fetch and display a list of posts' title on your blog under /posts url.
Routes approach
For that we are using Route's model and and ember's route substates​
You have 4 files:
app/routes/posts.js - where we define model hook
app/templates/posts.hbs - where we define route template (display posts)
app/templates/posts-loading.hbs - where we define posts loading state
app/templates/posts-error.hbs - where we define posts error state
Let's get thorough all of them.
Route
This is where we define model hook in which we are fetching our posts. (fetching definition is simplified)
1
// app/routes/posts.js
2
​
3
import Route from '@ember/routing/route';
4
​
5
export default class PostsRoute extends Route {
6
  async model() {
7
    const response = await fetch('/posts');
8
    return response.json();
9
  }
10
}
Copied!
Template
In route's template we are using the @model argument which contains the result form model() hook, and iterate through every post to display its title.
1
<!-- app/templates/posts.hbs -->
2
​
3
Latest posts:
4
​
5
{{#each @model as |post|}}
6
  {{post.title}}
7
{{/each}}
Copied!
Loading template
This is where we define a content which will show when route is loading (model hook).
1
<!-- app/templates/posts-loading.hbs -->
2
​
3
Loading posts...
Copied!
Error template
This is where we define a content which will show when route has encountered on error (model hook).
1
<!-- app/templates/posts-error.hbs -->
2
​
3
Sorry, your posts cannot be loaded
Copied!
Conclusion:
We need to define every state in a separate file
Route is blocking page rendering until the model() hook is resolved
When reloading posts data we will "refresh" the whole page
Now, let's do the same using Ember Await
Ember Await approach
We can use a controller or a component where we define our fetchPosts() method. A model() like equivalent. For this case we chose component to learn how to encapsulate and isolate our app.
We gonna create 3 files:
app/components/posts-list.js - a component file which will define fetch method for posts
app/components/posts-list.hbs - a component's template which will render title for each post
app/templates/posts.hbs - a posts route template which will render the component
PostsList component
Here we define fetchPosts which looks almost identically to previous model() hook. In this case it is a function, however it can be a getter or just a property.
In this case the fetchPosts recieves an AbortController which allows you (or the request maker) to watch when Ember Await has aborted the request. As we are using fetch we are passing the signal to it, so it can abort the request when needed. This will optimize your data fetching and ensure there is always one pending request at the time.
1
// app/components/posts-list.js
2
​
3
import Component from '@glimmer/component';
4
import { action } from '@ember/object';
5
​
6
class PostsComponent extends Component {
7
  @action
8
  async fetchPosts(abortController) {
9
    const response = await fetch('/posts', { signal: abortController.signal });
10
    return response.json();
11
  }
12
}
13
​
14
export default PostsComponent;
Copied!
PostsList template
In template, we are using <Await /> component which provides us state components for pending, fulfilled and rejected state. Thanks to them we can be sure that their content will be rendered only when promise reach proper state.
1
<!-- app/components/posts-list.hbs -->
2
​
3
<Await @promise={{this.fetchPosts}} as |await|>
4
  Latest posts:
5
​
6
  <await.Pending>
7
    Loading posts...
8
  </await.Pending>
9
​
10
  <await.Fulfilled as |posts|>
11
    {{#each posts as |post|}}
12
      {{post.title}}
13
    {{/each}}
14
  </await.Fulfilled>
15
​
16
  <await.Rejected>
17
    Sorry, your posts cannot be loaded
18
  </await.Rejected>
19
</Await>
Copied!
Posts route template
In this file, we are rendering our <PostsList /> component.
1
<!-- app/templates/posts.hbs -->
2
​
3
<PostsList />
Copied!
Conclusion:
We can define state on-demand, inline or using another component.
states can be used multiple times
our content is async (not blocking whole page from rendering - just the small part that uses the data)
When reloading only fragments in states components are "refreshed".
Getting started - Previous
Usage
Next - Guides
Load data on demand
Last modified 2yr ago
Copy link
Contents