Привет, Териз,
Я посмотрел твой код, и ты уже близко к решению!
Вот несколько замечаний:
-
Ты можешь изменить это с помощью компонента темы (не плагина). Я рекомендую использовать этот шаблон: GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes · GitHub
-
Использование коннектора — верный подход. Правильный путь:
/discourse/connectors/…
-
Аргументы, передаваемые в коннектор, можно получить через
outletArgs. Вот пример коннектора:
Это означает, что код должен выглядеть так:
export default class PinnedTopicBody extends Component {
get pinnedTopics() {
return this.outletArgs.topics.filter((t) => t.get("pinned"));
}
}
а шаблон:
{{#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}}
-
Примечание: К сожалению,
showPostersне передаётся как аргумент; здесь его значение нужно прописать явно. -
Примечание: По умолчанию это будет выглядеть так:
Генерируется обёртка div с уникальным ID, что нарушает CSS. Однако это необходимо, если ты хочешь привязать действия к элементу.
Ты можешь использовать
tagNameиclassNames, чтобы настроить обёртку.
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}}
(если ты знаешь, что не будешь ничего делать с элементом, ты можешь оставить tbody в шаблоне и использовать tagName("")).
Тогда у тебя получится вот так:
Я не стал подробно изучать, есть ли более лучший способ.
Я просто хотел помочь сделать твой код рабочим! 