Come ascoltare correttamente l'aggiornamento post-stream

Sviluppatore
1

Ciao,

Sto cercando di eseguire una funzione personalizzata quando viene aggiunto altro contenuto alla pagina (per post lunghi) utilizzando la seguente API:

api.onAppEvent('post-stream:refresh', () => {
       console.log('Nuovo contenuto aggiunto alla pagina...');
});

… tuttavia, quanto sopra non ha funzionato. Cosa sto facendo di sbagliato e qual è il modo corretto per farlo?

2

Puoi condividere qualche dettaglio in più su ciò che stai cercando di realizzare? Esistono diverse API che ti consentono di modificare il contenuto dei post durante il rendering. Quella più comune è api.decorateCookedElement

3

In realtà, ho appena capito che devo eseguire la funzione sui contenuti del post aggiunti al DOM.

Sto praticamente ricreando l’API addPosterIcon, poiché la mia deve contenere HTML personalizzato. Ho già completato tutto il lavoro, tranne la parte relativa allo scorrimento della pagina lunga.

Sto cercando di aggiungere un’icona accanto al nome utente del poster, che innesca un evento personalizzato. L’unico problema è che l’icona non viene ancora aggiunta al verificarsi di modifiche al DOM.

4

Il problema con questo metodo è che attiva più oggetti “cooked” contemporaneamente e quindi preferisce un ID (per evitare perdite di memoria), che non è ciò di cui ho bisogno. Ciò che mi funzionerebbe sarebbe se un solo evento venisse attivato dopo che tutti gli elementi sono stati “cooked”. Ho un’idea su come potrebbe essere implementato, ma esiste un modo corretto per farlo utilizzando l’API di Discourse?

5

L’API decorateCookedElement verrà attivata una volta per ogni post renderizzato. Al callback verrà passato l’elemento DOM contenente il contenuto del post. L’idea è che tu modifichi solo l’elemento che ti è stato passato, senza toccare nulla altro nella pagina.

Tuttavia, dato che desideri apportare modifiche ai metadati attorno al contenuto del post, decorateCookedElement probabilmente non è l’opzione corretta.

Allora la cosa migliore è probabilmente esaminare come è implementata l’API addPosterIcon:

Sotto il cofano si tratta di una chiamata alla funzione api.decorateWidget. Potresti effettuare tu stesso questa chiamata e farla rendere HTML grezzo. Per ulteriori informazioni sull’API decorateWidget, puoi consultare https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648#heading--4-c-6.

6

La soluzione per me per far sì che decorateCookedElement venga eseguito solo una volta per un tipo specifico, e quando l’ultimo contenuto cotto è pronto, è stata semplice come questa:

<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('Tutto il cooking è completato, aggiorna il nuovo contenuto..');
          });
      }
  });
</script>

Correggetemi se c’è qualcosa di sbagliato o se ci sono insidie in questo codice.

7

Mi scuso per aver aggiunto una domanda a questo vecchio argomento.

Stavamo utilizzando il codice sopra menzionato (decorateCookedElement) per chiamare una funzione di script breve quando vengono renderizzati post aggiuntivi in un argomento.

Con il flusso di post Glimmer, questa codifica non funziona correttamente. Otteniamo il seguente messaggio nella console degli sviluppatori:

L’accesso a helper.widget non è supportato quando si utilizza api.decorateCookedElement con il Glimmer Post Stream e può produrre risultati imprevisti.

Di conseguenza, la funzione di script non viene eseguita.

Esiste una funzionalità corrispondente che possiamo utilizzare per il flusso di post Glimmer?

Grazie in anticipo per qualsiasi informazione per modificare la nostra codifica.