/posts
url.model
hook in which we are fetching our posts. (fetching definition is simplified)@model
argument which contains the result form model()
hook, and iterate through every post to display its title
.model()
hook is resolvedposts
data we will "refresh" the whole pagefetchPosts()
method. A model()
like equivalent. For this case we chose component to learn how to encapsulate and isolate our app.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.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.<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.<PostsList />
component.