هل api.renderInOutlet لا يعمل؟

[NateDhaliwal]

أنا مرعوب حقًا. أحاول عرض مكون .gjs، ولكنه لا يظهر. لقد حاولت العرض في علامات القالب <h1>Hi</h1>، ولكن حتى ذلك لا يظهر. ما الذي يحدث؟

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) =\u003e {
  api.renderInOutlet("above-main-container", \u003ctemplate\u003e\u003ch1\u003eHi\u003c/h1\u003e\u003c/template\u003e);
});

لقد حذفت استيراد المكون لأنه لا يتم عرضه سواء بوجوده أو بدونه.

بصراحة، لا أعرف ما الذي أفعله بشكل خاطئ.

[NateDhaliwal]

أنا غبي جداً. كان الملف في api_initializers، وليس api-initializers .

[NateDhaliwal]

عظيم… الآن المكون الخاص بي لا يتم عرضه…

هل لدى أي شخص أي أفكار؟
ملف تهيئة الواجهة البرمجية الخاص بي:

import { apiInitializer } from "discourse/lib/api";
import CategoryHeader from "../components/category-header";

export default apiInitializer((api) => {
  api.renderInOutlet("above-category-heading", CategoryHeader);
});

وملف المكون الخاص بي (.gjs):

import icon from "discourse/helpers/d-icon";
import Component from "@glimmer/component";
import { inject as service } from "@ember/service";

export default class CategoryHeader extends Component {
  @service siteSettings;
  
  get ifParentCategory() {
    if (this.args.category.parentCategory) {
      return true;
    }
  }

  get catDesc() {
    if (settings.show_category_description) {
      return true;
    }
  }

  get logoImg() {
    if (settings.show_category_logo && this.args.category.uploaded_logo) {
      return this.args.category.uploaded_logo.url;
    } else if (settings.show_category_logo && settings.show_parent_category_logo && this.args.category.parentCategory && this.args.category.parentCategory.uploaded_logo) {
      return this.args.category.parentCategory.uploaded_logo.url;
    } else if (settings.show_site_logo && this.siteSettings.logo_small) {
      return this.siteSettings.logo_small;
    }
  }

  get ifParentProtected() {
    if (this.args.category.parentCategory && this.args.category.parentCategory.read_restricted) {
      return true;
    }
  }

  get ifProtected() {
    if (this.args.category.read_restricted) {
        return true;
    }
  }

  get lockIcon() {
    return settings.category_lock_icon || 'lock';
  }

  get showHeader() {
    console.log(this.args.category);
    const isException = this.args.category && settings.hide_category_exceptions.split("|").includes(this.args.category.name);
    const hideMobile = !settings.show_mobile && this.site.mobileView;
    const subCat = !settings.show_subcategory_header && this.args.category.parentCategory;
    const noDesc = !settings.hide_if_no_category_description && !this.args.category.description_text;
    const path = window.location.pathname;
    return (/^\\/c\\//.test(path)
      && !isException
      && !noDesc
      && !subCat
      && !hideMobile
    );
  }

  get getHeaderStyle() {
    let headerStyle = "";
    if (settings.header_style == "box") {
      headerStyle += "border-left: 6px solid #" + this.args.category.color + ";";
    }
    if (settings.header_style == "banner") {
      headerStyle += "background-color: #" + this.args.category.color + "; color: #" + this.args.category.text_color + ";";
    }
    if (this.args.category.uploaded_background) {
      if (settings.header_background_image != "outside"){
        headerStyle += "background-image: url(" + this.args.category.uploaded_background.url + ");";
      }
    }
    return headerStyle;
  }
          
  get aboutTopicUrl() {
    if (settings.show_read_more_link && this.args.category.topic_url) {
      return settings.read_more_link_text;
    }
  }

  <template>
    {{#if this.showHeader}}
      <div class="category-title-header category-banner-{{this.args.category.slug}}" style="{{this.getHeaderStyle}}">
        <div class="category-title-contents">
          <div class="category-logo aspect-image">
            <img src="{{this.logoImg}}">
          </div>
          <div class="category-title-name">
            {{#if this.ifParentProtected}}
              {{icon this.lockIcon}}
            {{/if}}
            {{#if this.ifParentCategory}}
              <a class="parent-box-link" href="{{this.args.category.parentCategory.url}}">
                <h1>{{this.args.category.parentCategory.name}}: </h1>
              </a>
            {{/if}}
            {{#if this.ifProtected}}
              {{icon this.lockIcon}}
            {{/if}}
            <h1>{{this.args.category.name}}</h1>
          </div>
          <div class="category-title-description">
            {{#if this.catDesc}}
              <div class="cooked">
                {{this.args.category.description}}
              </div>
            {{/if}}
          </div>
        </div>
        <div class="category-about-url">
          <a href="{{this.args.category.topic_url}}">{{this.aboutTopicUrl}}</a>
        </div>
      </div>
    {{/if}}
  </template>
}

كل شيء يبدو صحيحًا تقنيًا، فلماذا لا يتم عرضه …؟

قد يبدو هذا مألوفًا… نعم، أنا أحاول تبديل الأدوات المصغرة لمكونات Glimmer.

[manuel (Manuel Kostka)]

@NateDhaliwal

كل شيء يبدو صحيحًا تقنيًا، فلماذا لا يتم عرضه ..؟

كيف توصلت إلى أنه يبدو صحيحًا، هل اتبعت الخطوات الأساسية؟

1. تحقق من أخطاء وتحذيرات eslint وقم بحلها
2. تحقق من أخطاء وتحذيرات وحدة التحكم وقم بحلها

[NateDhaliwal]

@manuel

تحقق من أخطاء وحدة التحكم وتحذيراتها وقم بحلها

لم أر أي شيء، لذا تخطيت الأول.

اتضح أن

[NateDhaliwal]

@manuel لقد قمت بإصلاح كل شيء (باستثناء بعض أخطاء Prettier الغامضة:

) ولكن لا شيء يتم عرضه. لا يزال لا يوجد خطأ في وحدة تحكم المتصفح، باستثناء تحذير بشأن

، لكنني لا أعتقد أن هذا يمكن أن يكون السبب؟

أي أفكار؟

[Alteras (Steven Chang)]

لست متأكدًا من الكود الحالي لديك بعد إصلاحاتك، ولكن بالنظر إلى التحذير الذي تتلقاه، يجب أن يتم عرض div .category-title-header على الأقل في DOM.

أوصي بفحص الصفحة في متصفحك. أيضًا، حاول إضافة الكثير من console.log لمعرفة أين يصل التطبيق إلى الكود. بدلاً من ذلك، هناك إضافة متصفح Ember Inspector متاحة لـ Chrome و Firefox والتي ستسمح لك بقراءة شجرة المكونات.

[manuel (Manuel Kostka)]

@NateDhaliwal

أي أفكار؟

إذا استطعت، فإن أسهل طريقة للحصول على ملاحظات حول هذا هي مشاركة المستودع الخاص بك. الملفات التي شاركتها أعلاه ليست مستقلة وتتطلب ملف إعدادات أيضًا.

[NateDhaliwal]

نعم، آسف لعدم تضمين ذلك سابقًا. سيكون هذا:
https://github.com/NateDhaliwal/discourse-category-headers/tree/fix-compatibility-issues-new-new

(فرع fix-compatibility-issues-new-new.)

@Alteras

أوصي بفحص الصفحة في متصفحك. أيضًا، حاول إضافة الكثير من console.log لمعرفة أين يصل التطبيق إلى الكود. بدلاً من ذلك، هناك امتداد متصفح Ember Inspector متاح لـ Chrome و Firefox والذي سيتيح لك قراءة شجرة المكونات.

شكرًا، سألقي نظرة فاحصة على ذلك.

[NateDhaliwal]

@Alteras إنه موجود بالفعل، ولكنه لا يظهر لسبب ما. إضافة display: block !important جعلته يظهر، ولكن التنسيق مختلف تمامًا

تعديل: تم إصلاح CSS، وعناوين الرأس تظهر الآن. شكرًا جزيلاً @merefield @Alteras @manuel !

[manuel (Manuel Kostka)]

يبدو أنه يعمل بشكل جيد الآن
لا تزال تظهر بعض الأخطاء غير المعرفة في وحدة التحكم. يجب عليك استخدام سلسلة الاختياري مع المعامل ?. عند البحث عن هياكل متداخلة. على سبيل المثال:

this.args.category.description?.replace

[NateDhaliwal]

لقد رأيت هذا الخطأ للتو أيضًا عندما لا يوجد وصف للفئة. شكراً على الاقتراح!