こんにちは、
長い投稿の場合、ページに追加コンテンツが追加されたときにカスタム関数を実行しようとしています。以下の API を使用しています。
api.onAppEvent('post-stream:refresh', () => {
console.log('ページに新しいコンテンツが追加されました...');
});
しかし、上記の方法では動作しませんでした。何が間違っているのでしょうか？また、正しい方法はどのようなものでしょうか？
目指していることをもう少し詳しく教えていただけますか？投稿内容をレンダリング時に変更できる API はいくつかあります。最も一般的なのは api.decorateCookedElement です。
実は、DOM に追加された投稿コンテンツに対して関数を実行する必要があることに今気づきました。
私の実装にはカスタム HTML を含める必要があるため、実質的に addPosterIcon API を再構築しています。すでにほぼ完成しており、すべての機能が動作していますが、唯一の問題は、長いページをスクロールしているときに正しく動作しない点です。
投稿者のユーザー名の隣にアイコンを追加し、それをクリックするとカスタムイベントが発火するようにしようとしています。しかし、唯一の問題は、DOM の変更時にまだアイコンが追加されていないことです。
この方法の問題点は、複数の cooked オブジェクトを同時にトリガーするため、メモリリークを避けるために ID を優先することです。これは私の必要とするものではありません。私にとって望ましいのは、すべての要素が cooked になった後に、単一のイベントのみがトリガーされることです。これをどう実現するかについてはアイデアがありますが、Discourse API を使って適切な方法はあるでしょうか？
decorateCookedElement API は、レンダリングされた投稿ごとに 1 回トリガーされます。コールバックには、投稿コンテンツを含む DOM 要素が渡されます。この仕組みは、ページ上の他の要素ではなく、渡された要素のみを変更することを意図しています。
ただし、投稿コンテンツ周辺のメタデータを変更したい場合、decorateCookedElement は適切な選択肢ではない可能性があります。
であれば、addPosterIcon API の実装方法を参照するのが最善でしょう。
内部では api.decorateWidget 関数への呼び出しが行われています。この呼び出しを自身で行い、生 HTML をレンダリングさせることも可能です。decorateWidget API に関する詳細については、https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648#heading--4-c-6 をご参照ください。
特定のタイプに対して decorateCookedElement が一度だけ実行され、かつ最後の調理済みコンテンツが準備されたタイミングで実行されるための解決策は、これほどシンプルでした：
<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>
このコードに誤りや落とし穴がある場合は、ご指摘ください。
この古いトピックに質問を追加して申し訳ありません。
これまで、上記で言及されたコード (decorateCookedElement) を使用して、トピック内の追加の投稿がレンダリングされる際に短いスクリプト関数を呼び出していました。
Glimmer 投稿ストリームでは、このコーディングが正しく機能しません。開発者コンソールに次のメッセージが表示されます。
Glimmer 投稿ストリームで api.decorateCookedElement を使用する場合、helper.widget へのアクセスはサポートされておらず、予期しない結果をもたらす可能性があります。
その結果、スクリプト関数が実行されません。
Glimmer 投稿ストリームに使用できる同等の機能はありますか？
コーディングを調整するための情報があれば、事前に感謝いたします。