Salut Terise,
J’ai regardé ton code, et tu y es presque !
Voici quelques retours :
-
Tu peux le modifier avec un composant de thème (pas un plugin). Je t’encourage à utiliser ce modèle : GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes
-
L’utilisation d’un connecteur est correcte. Le bon chemin est
/discourse/connectors/…
-
Les arguments passés au connecteur peuvent être récupérés avec
outletArgs. Tu peux voir le connecteur ici :
Cela signifie que cela devrait être :
export default class PinnedTopicBody extends Component {
get pinnedTopics() {
return this.outletArgs.topics.filter((t) => t.get("pinned"));
}
}
et le template :
{{#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}}
-
Note : Malheureusement,
showPostersn’est pas passé en argument ; tu dois coder sa valeur ici en dur. -
Note : Par défaut, cela ressemblera à ceci :
Cela génère un wrapper div avec un ID unique et perturbe le CSS. Cependant, il est nécessaire si tu veux lier des actions à l’élément.
Tu peux utiliser tagName et classNames pour personnaliser le wrapper.
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}}
(si tu sais que tu ne feras rien sur l’élément, tu peux garder le tbody dans le template et utiliser tagName("")).
Ensuite, tu obtiens ceci :
Je ne l’ai pas examiné en profondeur pour voir s’il y avait une meilleure façon.
Je voulais juste aider à faire fonctionner ton code ! 