Hallo Terise,
ich habe mir deinen Code angesehen und du bist nah dran!
Hier sind einige Rückmeldungen:
-
Du kannst es mit einer Theme-Komponente (nicht einem Plugin) modifizieren. Ich würde dich ermutigen, diese Vorlage zu verwenden: GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes
-
Die Verwendung eines Connectors ist korrekt. Der richtige Pfad ist
/discourse/connectors/…
-
Die an den Connector übergebenen Argumente können mit
outletArgsabgerufen werden. Du kannst den Connector hier sehen:
Das bedeutet, dies sollte sein:
export default class PinnedTopicBody extends Component {
get pinnedTopics() {
return this.outletArgs.topics.filter((t) => t.get("pinned"));
}
}
und die Vorlage:
{{#if this.pinnedTopics}}
<tbody>
{{#each this.pinnedTopics as |topic|}}
<TopicListItem
@topic={{topic}}
@bulkSelectEnabled={{@outletArgs.bulkSelectEnabled}}
@lastVisitedTopic={{@outletArgs.lastVisitedTopic}}
@selected={{@outletArgs.selected}}
@hideCategory={{@outletArgs.hideCategory}}
@showPosters={{true}}
/>
{{/each}}
<tr class="table-break">
<td colspan="10"> </td>
</tr>
</tbody>
{{/if}}
-
Hinweis: Leider wird
showPostersnicht als Argument übergeben; du musst seinen Wert hier fest codieren. -
Hinweis: Standardmäßig sieht es so aus:
Es generiert ein div-Wrapper mit einer eindeutigen ID und vermasselt die CSS. Es ist jedoch notwendig, wenn du Aktionen an das Element binden möchtest.
Du kannst tagName und classNames verwenden, um den Wrapper anzupassen.
import { classNames, tagName } from "@ember-decorators/component";
@tagName("tbody")
@classNames("pinned-topics")
export default class PinnedTopicBody extends Component {
...
}
{{#if this.pinnedTopics}}
{{#each this.pinnedTopics as |topic|}}
...
{{/each}}
<tr class="table-break">
<td colspan="10"> </td>
</tr>
{{/if}}
(Wenn du weißt, dass du nichts mit dem Element machen wirst, kannst du das tbody in der Vorlage beibehalten und tagName("") verwenden).
Dann erhältst du dies:
Ich habe es nicht gründlich geprüft, um zu sehen, ob es einen besseren Weg gibt.
Ich wollte nur helfen, deinen Code zum Laufen zu bringen! 