Wie man richtig auf Post-Stream-Updates hört

Entwickler
1

Hallo,

ich versuche, eine benutzerdefinierte Funktion auszuführen, wenn der Seite zusätzlicher Inhalt hinzugefügt wird (für lange Beiträge), und verwende dafür folgende API:

api.onAppEvent('post-stream:refresh', () => {
       console.log('Neuer Inhalt wurde zur Seite hinzugefügt ...');
});

… doch das hat nicht funktioniert. Was mache ich falsch und wie wäre der richtige Weg?

2

Kannst du etwas mehr darüber erzählen, was du erreichen möchtest? Es gibt mehrere verschiedene APIs, mit denen du den Inhalt von Beiträgen beim Rendern ändern kannst. Die gebräuchlichste davon ist api.decorateCookedElement.

3

Tatsächlich habe ich gerade festgestellt, dass ich die Funktion für im DOM hinzugefügten Post-Inhalt ausführen muss.

Ich stelle praktisch die addPosterIcon-API neu her, da meine eine benutzerdefinierte HTML-Struktur enthalten muss. Ich habe bereits alles fertiggestellt und es funktioniert, außer beim Scrollen auf langen Seiten.

Ich versuche, neben dem Benutzernamen des Autors ein Symbol hinzuzufügen, das ein benutzerdefiniertes Ereignis auslöst. Das einzige Problem ist, dass es bei DOM-Änderungen noch nicht hinzugefügt wird.

4

Das Problem bei dieser Methode ist, dass sie mehrere „cooked"-Objekte gleichzeitig auslöst und daher eine ID bevorzugt (um Speicherlecks zu vermeiden), was ich jedoch nicht benötige. Was für mich funktionieren würde, wäre, wenn erst ein einzelnes Ereignis ausgelöst wird, nachdem alle Elemente „cooked" sind. Ich habe eine Idee, wie man das umsetzen könnte, aber gibt es einen geeigneten Weg, dies über die Discourse-API zu realisieren?

5

Die decorateCookedElement-API wird einmal für jeden gerenderten Beitrag ausgelöst. Der Callback erhält das DOM-Element, das den Beitragstext enthält. Die Idee ist, dass Sie nur das übergebene Element und nichts anderes auf der Seite ändern.

Da Sie jedoch Änderungen an den Metadaten um den Beitragstext herum vornehmen möchten, ist decorateCookedElement wahrscheinlich nicht die richtige Option.

Dann ist es wahrscheinlich am besten, sich anzusehen, wie die addPosterIcon-API implementiert ist:

Im Inneren ist dies ein Aufruf der Funktion api.decorateWidget. Sie könnten diesen Aufruf selbst tätigen und dann rohes HTML rendern lassen. Weitere Informationen zur decorateWidget-API finden Sie unter https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648#heading--4-c-6.

6

Die Lösung für mich, um sicherzustellen, dass decorateCookedElement nur einmal für einen bestimmten Typ und erst ausgeführt wird, wenn der letzte gekochte Inhalt bereit ist, war so einfach wie folgt:

<script type="text/discourse-plugin" version="0.11">
  api.decorateCookedElement((callback, opts) => {
      if(opts?.widget?.dirtyKeys?.name === 'post-stream') {
          if(this?.cooking) clearTimeout(this.cooking);
          this.cooking = setTimeout(() => {
              console.log('All cooking is done, update new content..');
          });
      }
  });
</script>

Bitte korrigiert mich, falls in diesem Code etwas falsch ist oder es Fallstricke gibt.

7

Entschuldigung, dass ich diesem alten Thema eine Frage hinzufüge.

Wir haben den oben genannten Code (decorateCookedElement) verwendet, um eine kurze Skriptfunktion aufzurufen, wenn zusätzliche Beiträge in einem Thema gerendert werden.

Mit dem Glimmer-Post-Stream funktioniert diese Codierung nicht richtig. Wir erhalten die folgende Meldung in der Entwicklerkonsole:

Der Zugriff auf helper.widget wird nicht unterstützt, wenn api.decorateCookedElement mit dem Glimmer Post Stream verwendet wird, und kann zu unerwarteten Ergebnissen führen.

Infolgedessen wird die Skriptfunktion nicht ausgeführt.

Gibt es eine entsprechende Funktionalität, die wir für den Glimmer-Post-Stream verwenden können?

Vielen Dank im Voraus für alle Informationen zur Anpassung unseres Codes.