Hola Terise,
¡Miré tu código y estás cerca!
Aquí tienes algunos comentarios:
-
Puedes modificarlo con un componente de tema (no un plugin). Te animo a usar esta plantilla: GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes
-
Usar un conector es correcto. La ruta correcta es
/discourse/connectors/…
-
Los argumentos pasados al conector se pueden recuperar con
outletArgs. Puedes ver el conector aquí:
Esto significa que debería ser:
export default class PinnedTopicBody extends Component {
get pinnedTopics() {
return this.outletArgs.topics.filter((t) => t.get("pinned"));
}
}
y la plantilla:
{{#if this.pinnedTopics}}
<tbody class="pinned-topics">
{{#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: Desafortunadamente,
showPostersno se pasa como argumento; debes codificar su valor aquí. -
Nota: Por defecto, se verá así:
Genera un div contenedor con un ID único y estropea el CSS. Sin embargo, es necesario si quieres vincular acciones al elemento.
Puedes usar tagName y classNames para personalizar el contenedor.
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 sabes que no harás nada en el elemento, puedes mantener el tbody en la plantilla y usar tagName("")).
Entonces, obtienes esto:
No lo examiné a fondo para ver si había una mejor manera.
¡Solo quería ayudar a que tu código funcionara! 