Wie man bei Navigationen um DOMContentLoaded herumkommt

Entwickler
1

Wir haben eine JS-Funktion, die bei DOMContentLoaded ausgeführt wird: document.addEventListener(“DOMContentLoaded”, OURFUNCTION).

Sie funktioniert einwandfrei, wenn Sie den Browser aktualisieren, aber sie wird nie angezeigt, wenn Sie durch die Website navigieren. Ich vermute, das liegt daran, dass Discourse das DOM nur einmal lädt und der Rest über clientseitige Navigation wie bei einer SPA gehandhabt wird. Daher frage ich mich, wie wir die Funktion bei einer Navigationsänderung in Discourse selbst ausführen können. Früher gab es einfache Möglichkeiten, dies über die Plugin-API zu tun, aber diese APIs sind veraltet und ich sehe sie in keiner Komponente mehr verwendet. Gibt es eine einfache Möglichkeit, dies immer noch zu tun? Oder müssen wir eine ganze Komponente erstellen, nur um etwas JavaScript bei einer Navigationsänderung auszuführen? Danke.

2

Hallo,

Wenn Sie nach einem Ereignis suchen, das beim Laden der Seite ausgelöst wird, gibt es api.onPageChange.

api.onPageChange((url, title) => {
   console.log('die Seite hat sich geändert zu: ' + url + ' und Titel ' + title);
});

Wenn Sie nach etwas anderem suchen, können Sie genauer beschreiben, was Sie erreichen möchten? Wir könnten Ihnen eine präzisere Antwort geben.

Nebenbei bemerkt, es gibt eine Menge Dokumentation, die Ihnen hilfreich sein könnte: Developer Guides - Discourse Meta.

3 „Gefällt mir“
3

Hmmm … Ich bin mir nicht sicher, ob das garantiert, dass der DOM-Inhalt geladen wurde. Ich glaube, es wird bei Routenänderungen ausgelöst, was viel früher ist.

Sie müssten in Betracht ziehen, eine Komponente an einen Plugin-Outlet anzuhängen und bei der didInsert-Modifikation auszulösen, wenn das Laden des DOM wichtig ist.

Wenn nur die Routenänderung wichtig ist, dann ja, onPageChange sollte es tun :+1:

1 „Gefällt mir“
4

Du hast vielleicht Recht! :thinking:

onPageChange wird im nächsten Runloop aufgerufen, daher denke ich, dass es in den meisten Situationen immer noch nach DOMContentLoaded aufgerufen wird, aber ich kann nicht garantieren, dass es garantiert ist.

Ich sehe Verwendungen, die sich auf onPageChange verlassen und DOM-Element-Sachen direkt tun. Woher wird das routeDidChange-Ereignis ausgelöst (EDIT: es ist von Ember: RouterService | 6.7.0 | Ember API Documentation)?

Ich stimme dem didInsert-Modifier zu, wirklich nett!

1 „Gefällt mir“
5

Danke. Ich habe die Dokumentation ausführlich gelesen und gemäß meinen Kommentaren und einer Nachverfolgung durch ein Discourse-Mitglied dort ist die Plugin-API veraltet und wird bald veraltet sein. Ihr Code funktioniert also möglicherweise jetzt, wird aber meiner Meinung nach bald in zukünftigen Updates fehlschlagen. Deshalb suche ich nach einer besseren Lösung. Es erscheint übertrieben, eine Glimmer-Komponente dafür zu erstellen, daher hoffte ich, dass es ein anderes Ereignis gäbe, das wir vielleicht nutzen könnten.

6

Ich glaube nicht, dass das richtig ist.

wurde letzte Woche aktualisiert.

Veraltet sind:

  • Widget-API
  • Rohe Vorlagen
  • Überschreiben von Vorlagen im Allgemeinen
3 „Gefällt mir“
7

Danke für die Klarstellung! Es handelt sich also nur um die Widget-API. Okay, ich werde zuerst die oben genannten API-Vorschläge ausprobieren.

3 „Gefällt mir“
8

Das ist irgendwie ein Segen :sweat_smile:, Glimmer ist viel entwicklerfreundlicher

2 „Gefällt mir“
9

Übrigens haben wir es mit api.OnPageChange getestet und es funktioniert einwandfrei. Wir sind noch auf keinen Fall gestoßen, bei dem der DOM-Inhalt beim Aufruf von OnPageChange nicht verfügbar war, daher scheint es, dass er nach DomContentLoaded ausgelöst wird. Aber ich kann mir nicht zu 100 % sicher sein. Vielen Dank für Ihre Hilfe dabei.

3 „Gefällt mir“
10

Gut. Beachten Sie nur, dass die Zeitplanung nicht garantiert ist. Aber ich freue mich, dass es für Ihren Anwendungsfall funktioniert!

1 „Gefällt mir“
11

Können Sie bitte besser erklären, was das bedeutet? Was ist der didInsert-Modifikator? Ich löse auf decorateCookedElement aus. Danke.

1 „Gefällt mir“
13
1 „Gefällt mir“
14

Das Dokument ist der richtige Weg, wie Robert angedeutet hat; Sie können auch eine Menge Beispiele im Repository sehen: Code search results · GitHub

1 „Gefällt mir“
15

Oh, okay, das ist also ein Ember-Feature und hat nichts mit Discourse zu tun? Der einzige Teil im Code, der wirklich „Discourse“-bezogen ist, wäre der Plugin-Outlet?

1 „Gefällt mir“
16

Ja, das ist Teil des Glimmer-Standards

pluginOutlets sind nur spezielle Komponenten, die dafür ausgelegt sind, andere Komponenten zu montieren:

2 „Gefällt mir“