ナビゲーションでDOMContentLoadedを回避する方法

DOMContentLoaded で実行される JavaScript 関数があります。document.addEventListener(“DOMContentLoaded”, OURFUNCTION)。

ブラウザを更新しても問題なく動作しますが、サイト内を移動する際には表示されません。これは、Discourse が DOM を一度だけ読み込み、残りは SPA のようにクライアントサイドのナビゲーションで処理されるためだと推測しています。そのため、Discourse 自体のナビゲーション変更時にこの関数を実行するにはどうすればよいか疑問に思っています。以前はプラグイン API を介して簡単な方法がありましたが、それらの API は廃止され、コンポーネントで使われているのを見かけなくなりました。まだ簡単な方法はあるのでしょうか?それとも、ナビゲーション変更時に JavaScript を実行するためだけにコンポーネント全体を作成する必要がありますか?よろしくお願いします。

こんにちは。

ページ読み込み時にイベントを探している場合は、api.onPageChangeがあります。

api.onPageChange((url, title) => {
   console.log('the page changed to: ' + url + ' and title ' + title);
});

もし他のことを探している場合は、何を達成したいのか詳しく教えていただけますか?より的確な回答ができるかと思います。

ちなみに、参考になるドキュメントがたくさんあります: Developer Guides - Discourse Meta.

「いいね!」 3

うーん…DOMコンテンツがロードされたことを保証しているかどうかわかりません。ルート変更時に発生すると思いますが、それはずっと早い段階です。

DOMのロードが重要であれば、コンポーネントをプラグインアウトレットにアタッチし、didInsert モディファイアで発生させることを検討する必要があります。

ルートの変更のみが重要であれば、onPageChange で十分です :+1:

「いいね!」 1

そうかもしれませんね!:thinking:

onPageChange は次のランループで呼び出されるため、ほとんどの場合 DOMContentLoaded の後でも呼び出されると思いますが、保証はできません。

onPageChange に依存して DOM 要素の操作を直接行っている使用例が見られます。ちなみに routeDidChange イベントはどこから発火されるのですか? (編集: ember からのようです: RouterService | 6.7.0 | Ember API Documentation)?

didInsert モディファイアには同意します。本当に素晴らしいです!

「いいね!」 1

ありがとうございます。ドキュメントを広範囲に読み込み、私のコメントと、そこで行われたディスコースメンバーのフォローアップに従い、プラグインAPIはレガシーであり、まもなく非推奨になる予定です。そのため、あなたのコードは現在機能するかもしれませんが、将来のアップデートでまもなく壊れるでしょう。だからこそ、より良い解決策を探しています。これのためにグリマーコンポーネントを作成するのはやりすぎのように思えるので、他に利用できるイベントがあることを願っていました。

それは正しくないと思います。

は先週更新されました。

非推奨になっているのは以下のものです。

  • ウィジェットAPI
  • 生のテンプレート
  • 一般的なテンプレートの上書き
「いいね!」 3

明確にしてくれてありがとう!ウィジェットAPIだけということですね。まずは上記のAPIの提案を試してみます。

「いいね!」 3

This is kind of a blessing :sweat_smile:, Glimmer is a helluva lot more developer friendly

「いいね!」 2

ちなみに、api.OnPageChangeでテストしたところ、問題なく動作しました。OnPageChangeを呼び出した際にDOMコンテンツが利用できないという事例にはまだ遭遇していませんが、DomContentLoadedの後にトリガーされているようです。しかし、100%確信はできません。ご協力ありがとうございました。

「いいね!」 3

承知いたしました。ただし、タイミングは保証されない点にご注意ください。しかし、ユースケースで機能するとのこと、嬉しく思います!

「いいね!」 1

これはどういう意味か、もう少し詳しく説明していただけますか?didInsertモディファイアとは何ですか?私はdecorateCookedElementで起動しています。

「いいね!」 1
「いいね!」 1

Robertが指摘したように、ドキュメントが最善の方法です。リポジトリにもたくさんの例があります: Code search results · GitHub

「いいね!」 1

ああ、わかりました。これはEmberの機能であり、Discourseとは関係ないということですか? コードの中で本当に「Discourse」に関連する部分は、pluginoutletだけでしょうか?

「いいね!」 1

はい、Glimmerの標準の一部です

pluginOutletsは、他のコンポーネントをマウントするように設計された特別なコンポーネントにすぎません。

「いいね!」 2