# Rerender on new route or transition

**URL:** https://meta.discourse.org/t/rerender-on-new-route-or-transition/68253
**Category:** Development
**Created:** [17.Август.2017 16:54:45 UTC](https://meta.discourse.org/t/rerender-on-new-route-or-transition/68253 "2017-08-17T16:54:45Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![codechef](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codechef/32/90261_2.png) [@codechef](https://meta.discourse.org/u/codechef)
#### Post date: [17.Август.2017 16:54:45 UTC](https://meta.discourse.org/t/rerender-on-new-route-or-transition/68253/1 "2017-08-17T16:54:45Z")

</div>

I’m building a banner ad plug-in. I have a section of the DOM that I need to re-render each time the page transitions. I have attempted (unsuccessfully) both a Widget and Ember Component, but neither are updating. I loaded them via a Plugin Outlet. I even tried to simplify the problem and dump the current timestamp of the load to the screen (rather than a banner), but only get a re-render if I refresh the browser.

Can someone please point me in the right direction for a solution? I’ve been through the main Discourse developer tutorials, BTW. Just seems like I’m missing something simple.

---

<div class="post-metadata">

### Author: ![vinothkannans](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vinothkannans/32/86465_2.png) [@vinothkannans](https://meta.discourse.org/u/vinothkannans)
#### Post date: [19.Август.2017 13:16:27 UTC](https://meta.discourse.org/t/rerender-on-new-route-or-transition/68253/2 "2017-08-19T13:16:27Z")

</div>

In which place you are trying to render? In Discourse most of the header UI sections will not refresh across page transactions unlike you hit browser refresh.

And can you post your code to see how you are doing it.

---

<div class="post-metadata">

### Author: ![codechef](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codechef/32/90261_2.png) [@codechef](https://meta.discourse.org/u/codechef)
#### Post date: [19.Август.2017 13:42:15 UTC](https://meta.discourse.org/t/rerender-on-new-route-or-transition/68253/3 "2017-08-19T13:42:15Z")

</div>

The plugin outlet right above the topic list.

---

<div class="post-metadata">

### Author: ![jack2](https://avatars.discourse-cdn.com/v4/letter/j/ac91a4/32.png) [@jack2](https://meta.discourse.org/u/jack2)
#### Post date: [19.Август.2017 14:02:54 UTC](https://meta.discourse.org/t/rerender-on-new-route-or-transition/68253/4 "2017-08-19T14:02:54Z")

</div>

Maybe you can try the following code (not tested):

```javascript
// My plugin initializer
export default {

	name: 'myPlugin',

	initialize(container) {

		// Reopen the router to add a didTransition hook
		const router = container.lookup('router:main')
		router.reopen({
			doSomething: function() {
				// Wait for rendering to be over. THIS DOESN'T WORK IN ALL CASES. 
				// In fact, there is no way to be sure rendering is complete, because 
				// a 'complete rendering' is meaningless (think about a looping DOM  
				// animation)
				Ember.run.schedule('afterRender', null, () => {
					// Do your stuff here
					...
				})
			}.on('didTransition')
		})

	}

}

```

---

<div class="post-metadata">

### Author: ![daniyal](https://avatars.discourse-cdn.com/v4/letter/d/58f4c7/32.png) [@daniyal](https://meta.discourse.org/u/daniyal)
#### Post date: [10.Август.2021 10:24:20 UTC](https://meta.discourse.org/t/rerender-on-new-route-or-transition/68253/5 "2021-08-10T10:24:20Z")

</div>

Может ли кто-нибудь дать дальнейшие рекомендации по этому вопросу?

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [12.Август.2021 09:33:37 UTC](https://meta.discourse.org/t/rerender-on-new-route-or-transition/68253/6 "2021-08-12T09:33:37Z")

</div>

Не могли бы вы пояснить, чего вы пытаетесь достичь?

---

<div class="post-metadata">

### Author: ![daniyal](https://avatars.discourse-cdn.com/v4/letter/d/58f4c7/32.png) [@daniyal](https://meta.discourse.org/u/daniyal)
#### Post date: [12.Август.2021 12:56:17 UTC](https://meta.discourse.org/t/rerender-on-new-route-or-transition/68253/7 "2021-08-12T12:56:17Z")

</div>

Необходимо добавить компонент в область футера и обновлять его содержимое при каждой загрузке страницы, когда пользователь посещает тему. Это слайдер, содержащий популярные темы нашего сообщества, и он отображается только на странице тем для анонимных пользователей. Таким образом, при посещении пользователем каждой темы, присутствующей в слайдере, соответствующий слайд должен удаляться из компонента. Подключение с помощью следующего выхода футера не вызывает повторный рендеринг компонента.

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [12.Август.2021 13:22:03 UTC](https://meta.discourse.org/t/rerender-on-new-route-or-transition/68253/8 "2021-08-12T13:22:03Z")

</div>

Когда в Discourse отображается «подвал» (footer), приложение отправляет «событие».

Это событие называется `inserted-custom-html:footer`.

Вы можете использовать это событие для обновления содержимого подвала следующим образом:

```javascript
api.onAppEvent("inserted-custom-html:footer", () => {
  // добавьте здесь ваш JS-код
});

```

Есть ещё несколько деталей [здесь.](https://meta.discourse.org/t/javascripts-targeting-the-footer-doesnt-work-after-page-transitions/180012/4?u=johani)

Это должно сработать для вашей задачи. Если нет — дайте знать и опубликуйте используемый вами код.

---

<div class="post-metadata">

### Author: ![Overgrow](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/overgrow/32/478189_2.png) [@Overgrow](https://meta.discourse.org/u/Overgrow)
#### Post date: [27.Май.2023 11:46:02 UTC](https://meta.discourse.org/t/rerender-on-new-route-or-transition/68253/9 "2023-05-27T11:46:02Z")

</div>

Я хотел бы разместить динамический контент в верхней части главной страницы (только на ней).

Какой сейчас считается лучшей практикой для обеспечения его перерисовки при каждом переходе на главную страницу?

Буду признателен за ссылку на существующий плагин, использующий этот подход.
