Olá Terise,
Eu olhei seu código e você está quase lá!
Aqui estão alguns feedbacks:
-
Você pode modificá-lo com um componente de tema (não um plugin). Eu encorajo você a usar este template: GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes
-
Usar um conector está correto. O caminho certo é
/discourse/connectors/…
-
Os argumentos passados para o conector podem ser recuperados com
outletArgs. Você pode ver o conector aqui:
Isso significa que isso deveria ser:
export default class PinnedTopicBody extends Component {
get pinnedTopics() {
return this.outletArgs.topics.filter((t) => t.get("pinned"));
}
}
e o 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: Infelizmente,
showPostersnão é passado como um argumento; você precisa codificá-lo aqui. -
Nota: Por padrão, parecerá isto:
Ele gera um wrapper div com um ID único e bagunça o CSS. No entanto, é necessário se você quiser vincular ações ao elemento.
Você pode usar tagName e classNames para personalizar o 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 você sabe que não fará nada no elemento, pode manter o tbody no template e usar tagName("")).
Então, você obtém isto:
Eu não examinei isso a fundo para ver se havia uma maneira melhor.
Eu só queria ajudar a fazer seu código funcionar! 