テーマコンポーネントの j/s の実行順序を制御するものは何ですか?

I have j/s in my theme (am I infamous yet? ;) which is modifying the DOM by adding elements via api.decorateCooked(…. It inserts a variety HTML head elements.

I also have the DiscoTOC Theme component installed.

However, adding the usual <div data-theme-toc="true"> </div> that DiscoTOC notices and expands, doesn’t generate a table-of-contents including my dynamically inserted elements.

I’m figuring this might be as simple as execution order… if DiscoTOC looks before my j/s adds more elements . . .

What determines the ordering of execution if multiple bits of theme j/s code are calling api.cooked(?

「いいね!」 3

bump? :slight_smile:

plus silliness to get to 20 characters

Note that DiscoTOC only runs on post contents - if you’re inserting those elements outside posts, it won’t see them.

I don’t think we’ve needed to define JS execution order yet.

「いいね!」 1

I’m inserting within the post, yes. That’s why I suspect execution order.

Some bit of code determines the execution order… that’s the leverage point for me to get my component before TOC. eg, if it’s alpha by component name (ie, as displayed in the Component list in Admin area) then I can try namin my component accordingly, etc

Pretty sure that the component execution order is not based on the name of the component. It’s based on the ID by default.

That said, you can set initializer order for advanced use cases. I can put DiscoTOC in a named initializer so you can run your code before DiscoTOC, but I need to know what you’re trying to do first to give you a clear answer.

Your modifications here are based on an HTTP/AJAX request, correct?

「いいね!」 1

Yes AJAX, but using a synchronous call. (I’ve always loved the oxymoron of synchronous AJAX :^)

I’m feeling like my next step is create a proper component—atm, it’s just some j/s pasted into my Theme’s Header. Then I can try fiddling with a judiciously chosen ID. “_foo” or “0-foo” might be all I need.

「いいね!」 1

Don’t we all :wink:

Correct. If you want to use named initializers and initializer order, your component will need to have an initializer in the /javascript folder.

No worries, though. I can help with all of that. I’ll get back to you on this tomorrow with a full answer.

「いいね!」 1

しばらく前に、j/sハッキングを適切なテーマコンポーネントにしました。

並び順を、私のコンポーネントがDiscourseの目次より前に実行されるように戻したいと思います。

iirc、テーマコンポーネントはプラグインの後で評価されます。

間違っているかもしれませんが、名前の順序でロードされるため、名前に x- を付けると、特定のテーマコンポーネントが最後に評価されるように過去に役立ちました。

それは問題ありません。DiscoTOC ( https://github.com/discourse/DiscoTOC.git ) コンポーネントと自作コンポーネントの順序を調整しようとしています。

上記他の人の返信では、コンポーネントの 名前 は実行順序に影響しないと示唆されています。aa-mycomponent と x-last-DiscoTOC に名前を変更しましたが、うまくいきませんでした。[DiscoTOC は動的に DOM に追加された見出しを含みません — はい、投稿本文内です]

https://forum.moversmindset.com/t/list-of-movers-mindset-podcast-episodes/1160

@Johani 5月の考えからさらにアイデアはありますか?

うーん…注文の問題だけではないかもしれません。インスペクトをクリックしたところ…HTMLの見出しだと思っていたものが、実際にはclass="d-toc-ignore"を持つDIVタグでした。

もっと深く掘り下げる時間です。私の見出しはどこへ行ったのでしょうか? :slight_smile:

どちらの方法でも、非常に基本的な例で証明できると思います。

2つのシンプルなコンポーネントを作成し、同じものをオーバーライドまたは接続します。おそらく、わずかに異なるシンプルなテンプレートで、アルファベット順で後に来る名前で呼び出し、どちらがテーマをオーバーライドすることになるかを確認します。

モデルのコードでは、名前によって明確に順序付けられています。

「いいね!」 1

名前は実行順序に影響しません。@merefield さん、リンクされた行は管理画面での表示方法に影響しますが、実際の実行には使用されません。

実行順序に関連する行はこちらです。

したがって、データベースの ‘id’ の昇順で実行されます。

Discourse インスタンス間で移植可能な唯一の保証は、テーマ コードが常にテーマ コンポーネント コードの前に実行されるということです。

@Johani さんが上記で言及したように、他のコンポーネントがロードされた後にコードを実行する必要がある場合は、順序指定をサポートする Ember イニシャライザを使用するのが最善でしょう。残念ながら、DiscoTOC が Ember イニシャライザを使用していないように見えるため、この場合はすぐに可能ではありません。DiscoTOC を 複数ファイル JavaScript (したがって Ember イニシャライザ) を使用するように更新することは、間違いなく pr-welcome です。

「いいね!」 3

それは残念です。役に立つかもしれません。いずれにしても、明確にしてくれてありがとう!

「いいね!」 1

(そして、これは Theme component order of precedence に関連しています)

DB ID の優先順位が機能することを再確認させてください。私のニーズは解決されました。皆さん、ありがとうございました!

「いいね!」 2