こんにちは、Teriseさん。
コードを見ましたが、あと一歩です！
フィードバックをいくつかご紹介します。
-
プラグインではなく、テーマコンポーネントで変更できます。このテンプレートの使用をお勧めします: GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes
-
コネクタの使用は正しいです。正しいパスは
/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は引数として渡されないため、ここで値をハードコーディングする必要があります。 -
注意: デフォルトでは、次のようになります。
これは、一意のIDを持つdivラッパーを生成し、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("") を使用できます）。
すると、次のようになります。
より良い方法があるかどうか、徹底的に調べたわけではありません。
あなたのコードを機能させる手助けをしたかっただけです！ 