Ciao Terise,
Ho esaminato il tuo codice e ci sei quasi!
Ecco alcuni feedback:
-
Puoi modificarlo con un componente tema (non un plugin). Ti incoraggio a usare questo modello: GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes
-
L’uso di un connettore è corretto. Il percorso giusto è
/discourse/connectors/…
-
Gli argomenti passati al connettore possono essere recuperati con
outletArgs. Puoi vedere il connettore qui:
Ciò significa che questo dovrebbe essere:
export default class PinnedTopicBody extends Component {
get pinnedTopics() {
return this.outletArgs.topics.filter((t) => t.get("pinned"));
}
}
e il 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}}
-
Nota: Sfortunatamente,
showPostersnon viene passato come argomento; devi codificarlo qui. -
Nota: Per impostazione predefinita, apparirà così:
Genera un div wrapper con un ID univoco e rovina il CSS. Tuttavia, è necessario se vuoi associare azioni all’elemento.
Puoi usare tagName e classNames per personalizzare il 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}}
(se sai che non farai nulla sull’elemento, puoi mantenere il tbody nel template e usare tagName("")).
Quindi, ottieni questo:
Non l’ho esaminato a fondo per vedere se c’era un modo migliore.
Volevo solo aiutarti a far funzionare il tuo codice! 