# Accessing model's data from beforeModel

**URL:** https://discuss.emberjs.com/t/accessing-models-data-from-beforemodel/15981
**Category:** Learning Team
**Created:** [January 9, 2019, 7:06am UTC](https://discuss.emberjs.com/t/accessing-models-data-from-beforemodel/15981 "2019-01-09T07:06:59Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![JimParsons](https://avatars.discourse-cdn.com/v4/letter/j/c2a13f/32.png) [@JimParsons](https://discuss.emberjs.com/u/JimParsons)
#### Post date: [January 9, 2019, 7:06am UTC](https://discuss.emberjs.com/t/accessing-models-data-from-beforemodel/15981/1 "2019-01-09T07:06:59Z")

</div>

We’re trying to delay the time taken for the model to render. But only the data from the model() is displayed. How to access the data from the beforeModel in the route ?

 ![00%20PM](https://us1.discourse-cdn.com/flex019/uploads/emberjs_public/original/3X/0/a/0a0746728d89baafc2dceecea77cb615326440db.png)

---

<div class="post-metadata">

### Author: ![jasonmit](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jasonmit/32/182_2.png) [@jasonmit](https://discuss.emberjs.com/u/jasonmit)
#### Post date: [January 9, 2019, 9:57am UTC](https://discuss.emberjs.com/t/accessing-models-data-from-beforemodel/15981/2 "2019-01-09T09:57:39Z")

</div>

The return values of `beforeModel()` and `afterModel()` hooks are not assigned to a property on the controller. Just the return value of `model()` will be assigned to `controller.model`.

That said, you should see the 16s delay before your template is rendered.

---

<div class="post-metadata">

### Author: ![JimParsons](https://avatars.discourse-cdn.com/v4/letter/j/c2a13f/32.png) [@JimParsons](https://discuss.emberjs.com/u/JimParsons)
#### Post date: [January 9, 2019, 10:00am UTC](https://discuss.emberjs.com/t/accessing-models-data-from-beforemodel/15981/3 "2019-01-09T10:00:22Z")

</div>

@jasonmit Okay, so how to use the data from the afterModel? Using setupController ?

---

<div class="post-metadata">

### Author: ![jasonmit](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jasonmit/32/182_2.png) [@jasonmit](https://discuss.emberjs.com/u/jasonmit)
#### Post date: [January 9, 2019, 10:03am UTC](https://discuss.emberjs.com/t/accessing-models-data-from-beforemodel/15981/4 "2019-01-09T10:03:35Z")

</div>

> Okay, so how to use the data from the afterModel?

You typically wouldn’t.

Are you trying to return multiple values in your model hook? That can be achieved with:

```js
import rsvp from 'rsvp';

export default Route.extend({
  model() {
    return rsvp.hash({
      foo: fetchFoo(),
      bar: fetchBar()
    });
  }
});

```

---

<div class="post-metadata">

### Author: ![JimParsons](https://avatars.discourse-cdn.com/v4/letter/j/c2a13f/32.png) [@JimParsons](https://discuss.emberjs.com/u/JimParsons)
#### Post date: [January 9, 2019, 10:06am UTC](https://discuss.emberjs.com/t/accessing-models-data-from-beforemodel/15981/5 "2019-01-09T10:06:22Z")

</div>

Thanks for your reply.

I don’t want to return multiple values from my model. What I wanna achieve is, when my page loads I want my beforeModel’s data to be displayed after delay, and then the model() and then the afterModel()'s data.

How can this be achieved?

 ![46%20PM](https://us1.discourse-cdn.com/flex019/uploads/emberjs_public/original/3X/6/3/6326691a0c4178abec2ca29db47360430c05ac96.png)

Using this, I can load only my data in the afterModel.

---

<div class="post-metadata">

### Author: ![jasonmit](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jasonmit/32/182_2.png) [@jasonmit](https://discuss.emberjs.com/u/jasonmit)
#### Post date: [January 9, 2019, 10:13am UTC](https://discuss.emberjs.com/t/accessing-models-data-from-beforemodel/15981/6 "2019-01-09T10:13:53Z")

</div>

I would not use these hooks for that purpose. The template renders after `setupController` is invoked, so after `beforeModel`, `model`, and `afterModel` is invoked.

If what you’re trying to do is change the model every few seconds you can initiate that work in `setupController`.

Example:

> <https://gist.github.com/jasonmit/9a896176be8ec02b601816b29fd0dd4c>

---

<div class="post-metadata">

### Author: ![JimParsons](https://avatars.discourse-cdn.com/v4/letter/j/c2a13f/32.png) [@JimParsons](https://discuss.emberjs.com/u/JimParsons)
#### Post date: [January 9, 2019, 10:18am UTC](https://discuss.emberjs.com/t/accessing-models-data-from-beforemodel/15981/7 "2019-01-09T10:18:00Z")

</div>

Got it. Just wanted to understand the working of these hooks and their order of execution.

I get that beforeModel() is for making any transitions before you load the actual model. Can you explain when and where we should go for afterModel() hook ? An usecase will also do.

Thanks in advance.

---

<div class="post-metadata">

### Author: ![jasonmit](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jasonmit/32/182_2.png) [@jasonmit](https://discuss.emberjs.com/u/jasonmit)
#### Post date: [January 9, 2019, 10:25am UTC](https://discuss.emberjs.com/t/accessing-models-data-from-beforemodel/15981/8 "2019-01-09T10:25:02Z")

</div>

They fire in blocking order from `beforeModel` \> `model` \> `afterModel`.

Meaning, they will wait for each promise to resolve before moving on to the next hook.

Personally, I _never_ use `afterModel` but one use might be doing some async work after your model resolves with the result of the `model` hook.

---

<div class="post-metadata">

### Author: ![JimParsons](https://avatars.discourse-cdn.com/v4/letter/j/c2a13f/32.png) [@JimParsons](https://discuss.emberjs.com/u/JimParsons)
#### Post date: [January 9, 2019, 10:27am UTC](https://discuss.emberjs.com/t/accessing-models-data-from-beforemodel/15981/9 "2019-01-09T10:27:13Z")

</div>

Okay, thank you so much !
