Come aggirare DOMContentLoaded per la navigazione?

Sviluppatore
1

Abbiamo una funzione js che viene eseguita su DOMContentLoaded, document.addEventListener(“DOMContentLoaded”, OURFUNCTION).

Funziona bene quando si aggiorna il browser, ma non viene mai mostrata quando si naviga nel sito. Presumo che sia perché Discourse carica il DOM una sola volta e il resto viene gestito con la navigazione lato client, come una SPA. Mi chiedo quindi, come possiamo eseguire la funzione al cambio di navigazione in Discourse stesso? C’erano modi semplici per farlo tramite l’API dei plugin, ma quelle API sono deprecate e non le vedo più utilizzate in nessun componente. Esiste ancora un modo semplice per farlo? O dobbiamo creare un intero componente solo per eseguire del JavaScript al cambio di navigazione? Grazie.

2

Ciao,

Se stai cercando un evento chiamato quando la pagina viene caricata, c’è api.onPageChange.

api.onPageChange((url, title) => {
   console.log('la pagina è cambiata in: ' + url + ' e titolo ' + title);
});

Se stai cercando qualcos’altro, puoi elaborare su cosa vuoi ottenere? Potremmo darti una risposta più precisa.

A proposito, hai un sacco di documentazione che potresti trovare utile: Developer Guides - Discourse Meta.

3 Mi Piace
3

Hmmm… non sono sicuro che garantisca il caricamento del contenuto del DOM, credo che si attivi al cambio di rotta, che è molto prima.

Dovresti considerare di allegare un componente a un plugin outlet e attivare il modificatore didInsert se il caricamento del DOM è importante.

Se è importante solo il cambio di rotta, allora sì, onPageChange dovrebbe bastare :+1:

1 Mi Piace
4

Potresti avere ragione! :thinking:

onPageChange viene chiamato nel ciclo di elaborazione successivo, quindi penso che verrà comunque chiamato dopo DOMContentLoaded nella maggior parte delle situazioni, ma non posso dire che sia garantito.

Vedo utilizzi che si basano su onPageChange e fanno cose con gli elementi DOM direttamente. Da dove viene attivato l’evento routeDidChange (EDIT: è da ember: RouterService | 6.7.0 | Ember API Documentation)?

Sono d’accordo con il modificatore didInsert, davvero ordinato!

1 Mi Piace
5

Grazie. Ho letto attentamente la documentazione e, come indicato nei miei commenti e in un follow-up di un membro di Discourse, l’API dei plugin è legacy e verrà presto deprecata. Quindi, anche se il tuo codice potrebbe funzionare ora, si romperà presto, credo nei futuri aggiornamenti. Ecco perché sto cercando una soluzione migliore. Sembra eccessivo creare un componente Glimmer per questo, quindi speravo ci fosse un altro evento che potremmo usare.

6

Non credo sia corretto.

è stato aggiornato la settimana scorsa.

Ciò che è deprecato sono:

  • API dei widget
  • Template grezzi
  • Sovrascrittura dei template in generale
3 Mi Piace
7

Grazie per il chiarimento! Quindi è solo l’API dei widget. Ok, proverò prima i suggerimenti dell’API sopra.

3 Mi Piace
8

Questa è una specie di benedizione :sweat_smile:, Glimmer è molto più facile per gli sviluppatori

2 Mi Piace
9

Comunque, l’abbiamo testato con api.OnPageChange e funziona bene. Non abbiamo ancora riscontrato un caso in cui il contenuto del DOM non fosse disponibile al momento della chiamata a OnPageChange, quindi sembra che venga attivato dopo DomContentLoaded. Tuttavia, non posso esserne sicuro al 100%. Grazie per il tuo aiuto.

3 Mi Piace
10

Bene. Sii solo consapevole che la tempistica non è garantita. Ma sono contento che funzioni per il tuo caso d’uso!

1 Mi Piace
11

Puoi spiegare meglio cosa significa? Cos’è il modificatore didInsert? Io eseguo su decorateCookedElement. Grazie.

1 Mi Piace
13
1 Mi Piace
14

Il documento è la strada da percorrere come indicato da Robert; puoi anche vedere un sacco di esempi sul repository: Code search results · GitHub

1 Mi Piace
15

Oh, ok, quindi questa è una funzionalità di Ember e non è correlata a Discourse? L’unica parte nel codice che è veramente correlata a “Discourse” sarebbe il pluginoutlet?

1 Mi Piace
16

Sì, fa parte dello standard Glimmer

pluginOutlets sono solo Component speciali progettati per montare altri Component:

2 Mi Piace