Javascript auslösen, wenn auf einen beliebigen Seitenlink geklickt wird, aber bevor der Seiteninhalt geladen wird

Entwickler
1

Hallo.
Wenn wir in Discourse die Seite wechseln, sind dies die offensichtlichen Schritte:

  1. Wir klicken auf den Link.
  2. Der aktuelle Inhalt verschwindet und der Ladebalken erscheint.
  3. Die URL wird aktualisiert und der neue Inhalt erscheint.

Beim Wechsel von einer Seite zur Startseite ist dies etwas anders: Die URL wird auf die Startseite geändert, sobald der aktuelle Inhalt verschwindet, und nicht erst, wenn der neue Inhalt erscheint.

Mein Ziel ist es, ein Skript zu haben, das ausgeführt wird, sobald wir auf einen beliebigen Seitenlink in Discourse klicken.
api.onPageChange ist in diesem Fall nicht geeignet, da der Code ungefähr zur gleichen Zeit ausgeführt wird, zu der der neue Seiteninhalt geladen wird.

Gibt es eine Discourse-Methode dafür? Ich habe die Event-Trigger durchsucht, konnte aber keinen finden, der dem entspricht, was ich brauche.

1 „Gefällt mir“
2

Hey :wave:

Aktuell gibt es in der Plugin-API keine Methode, die es ermöglicht, ein Skript vor einem Seitenübergang auszuführen, da dies meines Wissens nach bisher nicht vorgekommen ist.

Trotzdem kannst du die Aktion willTransition() in der Anwendungsroute nutzen.

In deinem Theme oder deiner Komponente würdest du etwas Ähnliches verwenden:

// Dies wird nach dem Übergang ausgeführt
api.onPageChange((url, title) => {
  console.log("nach dem Übergang");
});

// Dies wird direkt vor dem Übergang ausgeführt
api.modifyClass("route:application", {
  pluginId: "some-name",
  actions: {
    willTransition() {
      // Zuerst den Kerncode ausführen
      this._super(...arguments);
      // Dann einige Arbeiten erledigen
      console.log("vor dem Übergang");
      // Du kannst auch so etwas tun, um zu sehen, welche Daten dir zur Verfügung stehen,
      // wie zum Beispiel _router
      console.log(this)
    }
  }
});
6 „Gefällt mir“
3

Genau das, was ich gebraucht habe. Danke!

2 „Gefällt mir“
4

Dies scheint beim Betreten eines Themas aus einer Themenliste nicht ausgelöst zu werden?

Ich habe auch versucht, eines hinzuzufügen:

      api.modifyClass("route:topic", {
        pluginId: PLUGIN_ID,
        actions: {
          willTransition() {

Aber das wird auch nicht ausgelöst.

5

Ein paar Gründe, warum das möglicherweise nicht funktioniert:

  1. Aktionen in einem Hash zu platzieren, ist eine alte Syntax, die wir in Discourse nicht mehr verwenden. Theoretisch sollte es funktionieren, aber die Interoperabilität mit der neuen Syntax ist möglicherweise nicht perfekt. Der moderne Weg wäre

    api.modifyClass("route:application", (Superclass) => class extends Superclass {
  @action
  willTransition() {
    console.log("etwas tun");
    super.willTransition(...arguments);
  }
});

    Der übliche Haftungsausschluss für modifyClass gilt: Dies ist riskant und kann jederzeit fehlschlagen.

  2. Ich glaube nicht, dass willTransition in allen Situationen auf der Anwendungsroute garantiert ausgelöst wird. (z. B. wenn eine untergeordnete Route eine willTransition-Aktion hat, wird sie nicht unbedingt nach oben weitergegeben.)

Ich würde empfehlen, stattdessen die Ereignisse im Ember Router Service zu verwenden: RouterService | 5.12.0 | Ember API Documentation
z. B. etwas wie

const router = api.container.lookup("service:router");
router.on("routeWillChange", () => {
  console.log("route will change ausgelöst");
});
2 „Gefällt mir“
6

Schön, danke David, das werde ich als Nächstes versuchen!

Diese Untersuchung wurde (hüstel) ausgelöst, weil ich eine Möglichkeit brauchte, etwas bei jeder Seitenänderung auszulösen, und zwar vor dem Rendern.

Das Page Change API-Ereignis scheint anscheinend nicht garantiert vor dem Rendern von Seitenelementen ausgelöst zu werden.

1 „Gefällt mir“
7

Ich denke, es wird schwierig sein, dies perfekt zu machen. Ember erwartet, die volle Kontrolle über das Rendern zu haben, daher wird es schwierig sein, an beliebigen Punkten anzuhaken, und kann Probleme verursachen (abhängig davon, was Sie zu tun versuchen).

Offensichtlich weiß ich nicht, was Ihr Endziel ist … also ist der Aufwand vielleicht gerechtfertigt. In diesem Fall können Sie mich gerne ignorieren :wink:

(Wenn Sie natürlich ein #dev-Thema zu dem Problem eröffnen möchten, das Sie lösen möchten, werde ich es mir gerne ansehen)

8

Gerne, ich bin explizit, da der Code Open Source ist:

Ich arbeite mit einem Drittanbieter-Werbeanbieter zusammen, und dieser hat eine Funktion zum Zurücksetzen der Werbeseite in JavaScript, die ausgeführt werden muss, bevor die Anzeigen der neuen Seite ausgelöst werden.

Jede Verbesserung ist willkommen, und ich habe dies bereits im Topic List mit Johani’s Code umgesetzt. (in einem offenen PR).

Aber das hat das Topic … Ich werde Ihren Vorschlag als nächstes ausprobieren und ihn in beiden Fällen übernehmen, wenn dies die Dinge weiter verbessert.

9

Ah, ich verstehe, Sie modifizieren also nicht direkt das DOM :ok_hand:

In diesem Fall hoffe ich, dass routeWillChange funktionieren wird – es sollte sicherlich ausgelöst werden, bevor die nächste Route gerendert wird.

Der Vorbehalt ist, dass… im Falle von Dingen wie Weiterleitungen, es möglicherweise zweimal ausgelöst wird. Oder ausgelöst wird und dann der Übergang abgebrochen wird. Aber vielleicht ist das in diesem Fall in Ordnung.

2 „Gefällt mir“
10

Ja, hier bei Merefield Technology Towers gibt es keine unanständige direkte DOM-Manipulation. :sweat_smile:

Ja, ich werde den Dienst nutzen, dafür ist er da! Ich werde mit meinen Erfahrungen zurückmelden, da mich die Ergebnisse sicher auch andere interessieren könnten.

3 „Gefällt mir“
11

Ja, das räumt auf und die Dinge geschehen jetzt auf beiden Routen in der richtigen Reihenfolge.

:rocket:

Danke für deine Hilfe!

2 „Gefällt mir“