# How can I do something work after transition to some route and render complete?

**URL:** <https://discuss.emberjs.com/t/how-can-i-do-something-work-after-transition-to-some-route-and-render-complete/8589>\
**Category:** Uncategorized\
**Created:** [August 16, 2015, 9:52am UTC](https://discuss.emberjs.com/t/how-can-i-do-something-work-after-transition-to-some-route-and-render-complete/8589 "2015-08-16T09:52:30Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![imaxhung](https://avatars.discourse-cdn.com/v4/letter/i/b487fb/32.png) [@imaxhung](https://discuss.emberjs.com/u/imaxhung)\
**Post date:** [August 16, 2015, 9:52am UTC](https://discuss.emberjs.com/t/how-can-i-do-something-work-after-transition-to-some-route-and-render-complete/8589/1 "2015-08-16T09:52:30Z")

</div>

Has someone any advice?

---

<div class="post-metadata">

**Author:** ![danr1979](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/danr1979/32/11254_2.png) [@danr1979](https://discuss.emberjs.com/u/danr1979)\
**Post date:** [August 16, 2015, 8:25pm UTC](https://discuss.emberjs.com/t/how-can-i-do-something-work-after-transition-to-some-route-and-render-complete/8589/2 "2015-08-16T20:25:02Z")

</div>

You could use the “didTransition” action of your route. This will fire after the transition to the route completes.

---

<div class="post-metadata">

**Author:** ![imaxhung](https://avatars.discourse-cdn.com/v4/letter/i/b487fb/32.png) [@imaxhung](https://discuss.emberjs.com/u/imaxhung)\
**Post date:** [August 16, 2015, 11:12pm UTC](https://discuss.emberjs.com/t/how-can-i-do-something-work-after-transition-to-some-route-and-render-complete/8589/3 "2015-08-16T23:12:42Z")

</div>

No, didTransition will be fired before didInsertElement, not after render complete.

---

<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:** [August 17, 2015, 3:30am UTC](https://discuss.emberjs.com/t/how-can-i-do-something-work-after-transition-to-some-route-and-render-complete/8589/4 "2015-08-17T03:30:22Z")

</div>

> [@imaxhung](#):
>
> No, didTransition will be fired before didInsertElement, not after render complete.

```js
didInsertElement() {
  Ember.run.scheduleOnce('afterRender', this, () => {
    // ...
  });
}

```

---

<div class="post-metadata">

**Author:** ![imaxhung](https://avatars.discourse-cdn.com/v4/letter/i/b487fb/32.png) [@imaxhung](https://discuss.emberjs.com/u/imaxhung)\
**Post date:** [August 17, 2015, 4:19am UTC](https://discuss.emberjs.com/t/how-can-i-do-something-work-after-transition-to-some-route-and-render-complete/8589/5 "2015-08-17T04:19:11Z")

</div>

@jasonmit

Where I can place didInsertElement since viewClass was deprecated.

A template has many components. After these component rendered, I want to do something . I can call didInsertElement in a view of template before.

But now, how can I do this?

---

<div class="post-metadata">

**Author:** ![danr1979](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/danr1979/32/11254_2.png) [@danr1979](https://discuss.emberjs.com/u/danr1979)\
**Post date:** [August 17, 2015, 4:53am UTC](https://discuss.emberjs.com/t/how-can-i-do-something-work-after-transition-to-some-route-and-render-complete/8589/6 "2015-08-17T04:53:23Z")

</div>

Try placing Jason’s suggested run loop code in the didTransition action that I mentioned before. Or, didInsertElement is available in your components so you could put it there. However, that might not suit as you might want your after render code somewhere outside of a component so you have access to the model without having to pass it in via attributes to the component.

---

<div class="post-metadata">

**Author:** ![imaxhung](https://avatars.discourse-cdn.com/v4/letter/i/b487fb/32.png) [@imaxhung](https://discuss.emberjs.com/u/imaxhung)\
**Post date:** [August 17, 2015, 5:24am UTC](https://discuss.emberjs.com/t/how-can-i-do-something-work-after-transition-to-some-route-and-render-complete/8589/7 "2015-08-17T05:24:43Z")

</div>

Thank you.

Merged solution:

ApplicationRoute::didTransition =\> scheduleOnce(‘afterRender’)

---

<div class="post-metadata">

**Author:** ![jthoburn](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jthoburn/32/12401_2.png) [@jthoburn](https://discuss.emberjs.com/u/jthoburn)\
**Post date:** [August 18, 2015, 12:30am UTC](https://discuss.emberjs.com/t/how-can-i-do-something-work-after-transition-to-some-route-and-render-complete/8589/8 "2015-08-18T00:30:13Z")

</div>

You should note that scheduling in `afterRender` at this point in the process DOES NOT guarantee that it happens after rendering is complete. If the runloop empties before rendering is finished, this will fire sooner. 99.9% of the time you will never know the difference.

You can still use top level views in ember, or utilize a component to wrap your route’s template, and use the didInsertElement hook there.

---

<div class="post-metadata">

**Author:** ![imaxhung](https://avatars.discourse-cdn.com/v4/letter/i/b487fb/32.png) [@imaxhung](https://discuss.emberjs.com/u/imaxhung)\
**Post date:** [August 18, 2015, 10:12am UTC](https://discuss.emberjs.com/t/how-can-i-do-something-work-after-transition-to-some-route-and-render-complete/8589/9 "2015-08-18T10:12:58Z")

</div>

@jthoburn

Using component to wrap route’s template is specific, not for purpose, and ApplicationView::didInsertElement too.

I don’t understand `the runloop empties before rendering is finished`.

---

<div class="post-metadata">

**Author:** ![jthoburn](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jthoburn/32/12401_2.png) [@jthoburn](https://discuss.emberjs.com/u/jthoburn)\
**Post date:** [August 18, 2015, 3:08pm UTC](https://discuss.emberjs.com/t/how-can-i-do-something-work-after-transition-to-some-route-and-render-complete/8589/10 "2015-08-18T15:08:12Z")

</div>

> Using component to wrap route’s template is specific, not for purpose, and ApplicationView::didInsertElement too.

Yes, but both of these are common and acceptable practices. This is _the_ way you tell your app to do something after render.

> I don’t understand the runloop empties before rendering is finished.

The runloop is a set of queues. The queue can finish processing before rendering is complete. It’s not a guarantee that the `afterRender` queue runs after render is complete, just that it runs after the `render` queue is complete. The `render` queue is where tasks pertaining to rendering are scheduled, but what it considers to be render and what your browser considers to be render aren’t perfectly aligned.

The queues are for organizing the order of operations, they don’t guarantee timing. By using `didInsertElement` along with `afterRender` you guarantee yourself both timing and correct organization.

---

<div class="post-metadata">

**Author:** ![imaxhung](https://avatars.discourse-cdn.com/v4/letter/i/b487fb/32.png) [@imaxhung](https://discuss.emberjs.com/u/imaxhung)\
**Post date:** [August 19, 2015, 8:09am UTC](https://discuss.emberjs.com/t/how-can-i-do-something-work-after-transition-to-some-route-and-render-complete/8589/11 "2015-08-19T08:09:30Z")

</div>

@jthoburn

Thank you for your explanation.

There is a example.

Say that I need to scroll component content with using iscroll.js.

If the data of component content is explicit. use ApplicationRoute::didTransition =\> scheduleOnce(‘afterRender’, triggerSomethingForIscroll) It seem not working properly sometimes like you say.

use Component::didInsertElement =\> scheduleOnce(‘afterRender’, doIscrollFunction) It works fine.

But if the data of component content contains some asynchronous data which is from model relationships.

Is it right that the above way will not wait until asynchronous data loaded, so it will result to that iscroll get wrong height of content at the same time.

This is what I encountered.

Finally, does it exist a way to know render complete for any route transition globally?

---

<div class="post-metadata">

**Author:** ![patcoll](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/patcoll/32/10243_2.png) [@patcoll](https://discuss.emberjs.com/u/patcoll)\
**Post date:** [August 21, 2015, 12:07pm UTC](https://discuss.emberjs.com/t/how-can-i-do-something-work-after-transition-to-some-route-and-render-complete/8589/12 "2015-08-21T12:07:36Z")

</div>

@imaxhung One strategy I used to combat a similar problem was to wait to initialize iscroll in a didInsertElement afterRender callback until the content was actually in the DOM. Count the number of elements in the DOM where you expect them. If the count is greater than zero, initialize the plugin.

---

<div class="post-metadata">

**Author:** ![bart\_vandeenen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/bart_vandeenen/32/9935_2.png) [@bart\_vandeenen](https://discuss.emberjs.com/u/bart_vandeenen)\
**Post date:** [August 23, 2015, 10:29am UTC](https://discuss.emberjs.com/t/how-can-i-do-something-work-after-transition-to-some-route-and-render-complete/8589/13 "2015-08-23T10:29:28Z")

</div>

I generally just create a view for the route (like `app/views/whatever.js`) and add an `afterRender` function to the controller

```
 export default Ember.View.extend({
    didInsertElement: function() {
        if(this.get('controller').afterRender) {
            this.get('controller').afterRender();
        }   
    }   
});

```

~