フッターを対象とするJavaScriptがページ遷移後に機能しない

開発
4

これに対処する方法はいくつか考えられますが、まずは適切なカスタマイズフックを使用した「正しい」方法で試してみましょう。

テーマのフッターセクションに HTML を追加すると、Discourse はページ遷移時や無限スクロールでより多くの要素が追加された際に、要素が飛び跳ねないように処理を行います。

これは custom-html コンポーネントとしてここに追加されます。

discourse/app/assets/javascripts/discourse/app/templates/application.hbs at a0bbc346cb5d5b89d1a3efdfa89869349a8b067f · discourse/discourse · GitHub

コンポーネントのコードを見ると、レンダリング時にアプリイベントを発火させることがわかります。

discourse/app/assets/javascripts/discourse/app/components/custom-html.js at a0bbc346cb5d5b89d1a3efdfa89869349a8b067f · discourse/discourse · GitHub

これが使用すべきフックです。

どのように使用すればよいでしょうか？
plugin-api には、特定のアプリイベントが発火したときにコードを実行できるメソッドがあります。

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/lib/plugin-api.js#L507-L519

イベント名は既知なので、以下のように使用できます。

api.onAppEvent("inserted-custom-html:footer", () => {
  // ここで作業を行います
});

これは plugin-API のメソッドであるため、スクリプトタグの type を text/discourse-plugin に変更する必要があります。

<script type="text/discourse-plugin" version="0.8">
api.onAppEvent("inserted-custom-html:footer", () => {
  // ここで作業を行います
});
</script>

上記のスニペットは、フッターがレンダリングされるたびに発火します。したがって、以下のような処理が可能になります。

<script type="text/discourse-plugin" version="0.8">
api.onAppEvent("inserted-custom-html:footer", () => {
  $(".footer-div #footerNavDiv").click(function () {
    console.log("クリックイベントをキャッチしました");
    // クリックイベントに対する処理をここで実施
  });
});
</script>

plugin-API については、こちら で詳しく読むことができます。

「いいね！」 5