Rerender on new route or transition

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.

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.

The plugin outlet right above the topic list.

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

// 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')
		})

	}

}

Quelqu’un peut-il nous en dire plus à ce sujet ?

Pourriez-vous s’il vous plaît expliquer ce que vous essayez d’accomplir ?

Besoin d’ajouter un composant dans la zone de pied de page et de mettre à jour son contenu à chaque chargement de page lorsqu’un utilisateur visite un sujet. Il s’agit d’un carrousel contenant les sujets principaux de notre communauté, visible uniquement sur la page des sujets pour les utilisateurs anonymes. Ainsi, à chaque fois qu’un utilisateur visite un sujet présent dans le carrousel, ce diapositive doit être supprimée du composant. Son montage via la sortie de pied de page ci-dessous ne provoque pas de réaffichage du composant.

Lorsque le « footer » est rendu dans Discourse, l’application envoie un « événement ».

L’événement est inserted-custom-html:footer.

Vous pouvez utiliser cet événement pour mettre à jour le contenu de votre pied de page comme suit :

api.onAppEvent("inserted-custom-html:footer", () => {
  // ajoutez votre JS ici
});

Vous trouverez quelques détails supplémentaires ici.

Cela devrait fonctionner pour ce que vous essayez d’accomplir. Si ce n’est pas le cas, faites-le-moi savoir et publiez le code que vous utilisez.

2 « J'aime »

J’aimerais placer un contenu dynamique en haut de la page d’accueil (uniquement).

Quelle est actuellement la meilleure pratique pour qu’il se re-rende à chaque transition vers la page d’accueil ?

J’apprécierais tout lien vers un plugin existant qui utilise cela…