فصل المواضيع المثبتة

[Arkshine]

أهلاً تيريز،

لقد اطلعت على الكود الخاص بك، ولقد اقتربت!

إليك بعض الملاحظات:

• يمكنك تعديله باستخدام مكون سمة (وليس إضافة). أشجعك على استخدام هذا القالب: GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes

• استخدام الموصل صحيح. المسار الصحيح هو /discourse/connectors/…
  

  

• يمكن استرداد الوسائط التي تم تمريرها إلى الموصل باستخدام outletArgs. يمكنك رؤية الموصل هنا:

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/topic-list/list.gjs#L126-L136

هذا يعني أنه يجب أن يكون:

export default class PinnedTopicBody extends Component {
  get pinnedTopics() {
    return this.outletArgs.topics.filter((t) => t.get("pinned"));
  }
}
 

والقالب:

{{#if this.pinnedTopics}}
  {{#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">&nbsp;</td>
    </tr>
  </tbody>
{{/if}}

• ملاحظة: للأسف، لا يتم تمرير showPosters كوسيط؛ يجب عليك ترميز قيمتها هنا.

• ملاحظة: افتراضيًا، سيبدو الأمر كالتالي:
  

  

  يقوم بإنشاء غلاف 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">&nbsp;</td>
 </tr>
{{/if}}

(إذا كنت تعلم أنك لن تفعل شيئًا على العنصر، يمكنك الاحتفاظ بـ tbody في القالب واستخدام tagName("")).

ثم تحصل على هذا:

لم أقم بفحصه بدقة لمعرفة ما إذا كانت هناك طريقة أفضل.
أردت فقط المساعدة في جعل الكود الخاص بك يعمل!