Was steuert die Ausführungsreihenfolge für die JS-Komponenten von Themes?

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 „Gefällt mir“

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 „Gefällt mir“

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 „Gefällt mir“

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 „Gefällt mir“

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 „Gefällt mir“

Vor einiger Zeit habe ich mein J/S-Hacking in eine richtige Theme-Komponente umgewandelt.

Ich würde gerne darauf zurückkommen, die Reihenfolge so zu gestalten, dass meine Komponente vor dem Discourse-Inhaltsverzeichnis ausgeführt wird.

Soweit ich mich erinnere, werden Theme Components nach Plugins ausgewertet.

Und ich kann mich irren, aber sie werden in alphabetischer Reihenfolge geladen, daher hat es mir in der Vergangenheit geholfen, ein x- vor den Namen zu setzen, um sicherzustellen, dass eine bestimmte Theme Component zuletzt ausgewertet wird.

Das ist in Ordnung. Ich versuche, die Reihenfolge der DiscoTOC-Komponente ( https://github.com/discourse/DiscoTOC.git ) und einer von mir erstellten Komponente zu steuern.

Antworten anderer oben deuten darauf hin, dass der Name der Komponente die Ausführungsreihenfolge nicht beeinflusst. Ich habe sie gerade in aa-mycomponent und x-last-DiscoTOC umbenannt und es funktioniert nicht. [DiscoTOC schließt keine dynamisch zur DOM hinzugefügten Überschriften ein – ja, innerhalb des Beitragsrumpfes]

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

@Johani, weitere Ideen aus deiner Gedankenspirale vom Mai?

hmmmmmmm… vielleicht ist das Problem größer als die Reihenfolge. Ich habe gerade „Inspizieren“ aufgerufen… und die Elemente im DOM, die ich für HTML-Überschriften hielt… sind tatsächlich DIV-Tags mit class=\"d-toc-ignore\".

Zeit für mich, tiefer zu graben. Wo sind meine Überschriften hin? :slight_smile:

Nun, ich denke, Sie könnten das beweisen, indem Sie ein sehr einfaches Beispiel ausprobieren.

Erstellen Sie zwei einfache Komponenten, die dasselbe überschreiben oder verbinden, vielleicht eine einfache Vorlage mit einem geringfügigen Unterschied, nennen Sie eine mit einem Namen, der später im Alphabet beginnt, und notieren Sie, welche das Thema überschreibt.

Es ist hier im Code des Modells eindeutig nach Namen geordnet:

1 „Gefällt mir“

Der Name hat keinen Einfluss auf die Ausführungsreihenfolge. @merefield die Zeile, auf die Sie verwiesen haben, beeinflusst, wie sie in der Admin-Oberfläche angezeigt werden, wird aber nicht für die eigentliche Ausführung verwendet.

Dies ist die relevante Zeile für die Ausführungsreihenfolge:

Sie werden also in aufsteigender Reihenfolge der „id“ in der Datenbank ausgeführt.

Die einzige Garantie, die über Discourse-Instanzen hinweg portierbar ist, ist, dass Theme-Code immer vor Theme Component-Code ausgeführt wird.

Wie @Johani oben erwähnt hat, ist die beste Vorgehensweise, wenn Sie Code ausführen müssen, nachdem eine andere Komponente geladen wurde, wahrscheinlich die Verwendung eines Ember-Initialisierers, der die Reihenfolge unterstützt. Leider ist dies in diesem Fall nicht sofort möglich, da DiscoTOC anscheinend keine Ember-Initialisierer verwendet. Ein Update von DiscoTOC zur Verwendung von JavaScript mit mehreren Dateien (und damit Ember-Initialisierern) wäre sicherlich ein pr-welcome.

3 „Gefällt mir“

Das ist bedauerlich, da es nützlich sein könnte. Danke für die Klärung auf jeden Fall!

1 „Gefällt mir“

(…und das steht im Zusammenhang mit Theme component order of precedence)

Ich wollte nur zurückmelden, dass die Reihenfolge der Priorität der DB-IDs funktioniert; löst mein Problem. Danke an alle!

2 „Gefällt mir“