¿Cómo sortear DOMContentLoaded para la navegación?

Desarrollador
1

Tenemos una función js que se ejecuta en DOMContentLoaded, document.addEventListener(“DOMContentLoaded”, OURFUNCTION).

Funciona bien cuando actualizas el navegador, pero nunca se muestra cuando navegas por el sitio. Supongo que es porque Discourse solo carga el DOM una vez y luego el resto se maneja con la navegación del lado del cliente, como una SPA. Así que me pregunto, ¿cómo podemos ejecutar la función en un cambio de navegación en Discourse? Solía haber formas fáciles de hacerlo a través de la API de complementos, pero esas API están obsoletas y ya no las veo utilizadas en ningún componente. ¿Hay alguna forma fácil de hacer esto todavía? ¿O necesitamos crear un componente completo solo para ejecutar algo de JavaScript ante un cambio de navegación? Gracias.

2

Hola,

Si buscas un evento que se llama cuando la página se carga, existe api.onPageChange.

api.onPageChange((url, title) => {
   console.log('la página cambió a: ' + url + ' y título ' + title);
});

Si buscas otra cosa, ¿puedes explicar qué quieres lograr? Podríamos darte una respuesta más precisa.

Por cierto, tienes mucha documentación que podría resultarte útil: Developer Guides - Discourse Meta.

3 Me gusta
3

Hmmm… No estoy seguro de que garantice que el contenido del DOM se haya cargado, creo que se activa en el cambio de ruta, que es mucho antes.

Tendrías que considerar adjuntar un componente a un Plugin Outlet y activarlo en el modificador didInsert si la carga del DOM es importante.

Si solo el cambio de ruta es importante, entonces sí, onPageChange debería hacerlo :+1:

1 me gusta
4

¡Puede que tengas razón! :thinking:

onPageChange se llama en el próximo ciclo de ejecución, así que creo que todavía se llamará después de DOMContentLoaded en la mayoría de las situaciones, pero no puedo decir que esté garantizado.

Veo usos que dependen de onPageChange y hacen cosas con elementos DOM directamente. ¿Desde dónde se dispara el evento routeDidChange por cierto (EDIT: es de ember: RouterService | 6.7.0 | Ember API Documentation)?

Estoy de acuerdo con el modificador didInsert, ¡realmente genial!

1 me gusta
5

Gracias. He leído la documentación extensamente y, según mis comentarios y el seguimiento de un miembro de Discourse allí, la API de complementos es heredada y pronto será obsoleta. Por lo tanto, aunque su código podría funcionar ahora, pronto dejará de hacerlo, creo que en futuras actualizaciones. Es por eso que estoy buscando una mejor solución. Parece excesivo crear un componente de brillo para esto, así que esperaba que hubiera otro evento que quizás pudiéramos usar.

6

No creo que eso sea correcto.

se actualizó la semana pasada.

Lo que está obsoleto es:

  • API de widgets
  • Plantillas sin procesar
  • Sobrescribir plantillas en general
3 Me gusta
7

¡Gracias por la aclaración! Entonces es solo la API del widget. Ok, primero intentaré las sugerencias de la API anteriores.

3 Me gusta
8

Esto es como una bendición :sweat_smile:, Glimmer es mucho más amigable para los desarrolladores.

2 Me gusta
9

Por cierto, lo probamos con api.OnPageChange y funciona bien. Todavía no hemos encontrado un caso en el que el contenido del DOM no estuviera disponible al llamar a OnPageChange, por lo que parece que se activa después de DomContentLoaded. Pero no puedo estar 100% seguro. Gracias por tu ayuda en esto.

3 Me gusta
10

Bien. Solo ten en cuenta que el tiempo no está garantizado. ¡Pero me alegra que funcione para tu caso de uso!

1 me gusta
11

¿Puede explicar mejor qué significa esto? ¿Qué es el modificador didInsert? Estoy disparando en el decorateCookedElement. Gracias.

1 me gusta
13
1 me gusta
14

El documento es el camino a seguir como señaló Robert; también puedes ver un montón de ejemplos en el repositorio: Code search results · GitHub

1 me gusta
15

Oh, ok, ¿así que esta es una característica de Ember y no está relacionada con Discourse? ¿La única parte del código que está realmente relacionada con “Discourse” sería el pluginoutlet?

1 me gusta
16

Sí, es parte del estándar Glimmer

pluginOutlets son solo Componentes especiales diseñados para montar otros Componentes:

2 Me gusta