ddsgad
(DDSGadget)
2025 年 2 月 11 日午後 9:38
1
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
そうかもしれませんね!
onPageChange は次のランループで呼び出されるため、ほとんどの場合 DOMContentLoaded の後でも呼び出されると思いますが、保証はできません。
onPageChange に依存して DOM 要素の操作を直接行っている使用例が見られます。ちなみに routeDidChange イベントはどこから発火されるのですか? (編集: ember からのようです: RouterService | 6.7.0 | Ember API Documentation )?
didInsert モディファイアには同意します。本当に素晴らしいです!
「いいね!」 1
ddsgad
(DDSGadget)
2025 年 2 月 11 日午後 10:55
5
ありがとうございます。ドキュメントを広範囲に読み込み、私のコメントと、そこで行われたディスコースメンバーのフォローアップに従い、プラグインAPIはレガシーであり、まもなく非推奨になる予定です。そのため、あなたのコードは現在機能するかもしれませんが、将来のアップデートでまもなく壊れるでしょう。だからこそ、より良い解決策を探しています。これのためにグリマーコンポーネントを作成するのはやりすぎのように思えるので、他に利用できるイベントがあることを願っていました。
ddsgad
(DDSGadget)
2025 年 2 月 11 日午後 11:25
7
明確にしてくれてありがとう!ウィジェットAPIだけということですね。まずは上記のAPIの提案を試してみます。
「いいね!」 3
DDSGadget:
it’s just the widget api
This is kind of a blessing , Glimmer is a helluva lot more developer friendly
「いいね!」 2
ddsgad
(DDSGadget)
2025 年 2 月 12 日午後 7:26
9
ちなみに、api.OnPageChangeでテストしたところ、問題なく動作しました。OnPageChangeを呼び出した際にDOMコンテンツが利用できないという事例にはまだ遭遇していませんが、DomContentLoadedの後にトリガーされているようです。しかし、100%確信はできません。ご協力ありがとうございました。
「いいね!」 3
merefield
(Robert)
2025 年 2 月 12 日午後 10:41
10
承知いたしました。ただし、タイミングは保証されない点にご注意ください。しかし、ユースケースで機能するとのこと、嬉しく思います!
「いいね!」 1
ddsgad
(DDSGadget)
2025 年 2 月 21 日午後 3:00
11
これはどういう意味か、もう少し詳しく説明していただけますか?didInsertモディファイアとは何ですか?私はdecorateCookedElementで起動しています。
「いいね!」 1
Robertが指摘したように、ドキュメントが最善の方法です。リポジトリにもたくさんの例があります: Code search results · GitHub
「いいね!」 1
ddsgad
(DDSGadget)
2025 年 2 月 21 日午後 3:03
15
DDSGadget:
didInsert modifier
ああ、わかりました。これはEmberの機能であり、Discourseとは関係ないということですか? コードの中で本当に「Discourse」に関連する部分は、pluginoutletだけでしょうか?
「いいね!」 1
はい、Glimmerの標準の一部です
pluginOutletsは、他のコンポーネントをマウントするように設計された特別なコンポーネントにすぎません。
With the contents:
```handlebars
<b>Hello World</b>
```
Will insert <b>Hello World</b> at that point in the template.
**/
export default class PluginOutletComponent extends GlimmerComponentWithDeprecatedParentView {
@service clientErrorHandler;
context = {
...helperContext(),
get parentView() {
return this.parentView;
},
get() {
deprecated(GET_DEPRECATION_MSG, {
id: "discourse.plugin-outlet-context-get",
});
「いいね!」 2