테이즈, 안녕하세요!
코드를 살펴봤는데, 거의 다 왔네요!
몇 가지 피드백을 드릴게요:
-
플러그인이 아닌 테마 컴포넌트로 수정할 수 있습니다. 아래 템플릿 사용을 권장합니다: 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는 인수로 전달되지 않으므로, 여기서는 값을 하드코딩해야 합니다. -
참고: 기본적으로 다음과 같이 보입니다:
고유한 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("")을 사용할 수 있습니다.)
그럼 이렇게 됩니다:
더 나은 방법이 있는지 철저히 검토하지는 않았습니다.
단순히 코드가 작동하도록 돕고 싶었을 뿐입니다! 