api.renderInOutlet לא מרנדר?

אני באמת משתגעת. אני מנסה לרנדר רכיב .gjs, אבל הוא לא מופיע. ניסיתי לרנדר בתגיות תבנית `

Hi

`, אבל אפילו זה לא מופיע. מה קורה?

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

export default apiInitializer((api) =
  api.renderInOutlet("above-main-container", 
    
      
        Hi
      
    );
});

השמטתי את ייבוא הרכיב כי הוא לא מרונדר איתו/בלי איתו.

בכנות, אני לא יודעת מה אני עושה לא בסדר.

אני ממש עיוור. הקובץ היה ב-api_initializers, לא ב-api-initializers .

Great… now my component isn’t rendering…

---

Does anyone have any ideas?
My api-initializers file:

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

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

And my component (.gjs) file:

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>
}

Everything looks technically correct, so why doesn’t it render ..?

This may look familiar… yes, I’m trying to switch widgets for Glimmer components.

How do you conclude that it looks correct, did you follow basic steps?

1. Check eslint errors and warnings and resolve them
2. Check console errors and warnings and resolve them

Didn’t see any so I skipped the first one.

Turns out

@manuel So I’ve fixed everything (except for some vague Prettier errors:

) but nothing renders. Still no error in the browser console, except for a warning about

, but I don’t think that could be the cause?

Any ideas?

אני לא בטוח מה הקוד הנוכחי שלך אחרי התיקונים שלך, אבל בהתחשב באזהרה שאתה מקבל, ה-div .category-title-header אמור לפחות להיות מוצג ב-DOM.

אני ממליץ לבדוק את הדף בדפדפן שלך. בנוסף, נסה להוסיף כמה console.log כדי לראות לאן היישום מגיע בקוד. לחלופין, קיימת תוסף דפדפן Ember Inspector זמין עבור Chrome ו-Firefox שיאפשר לך לקרוא את עץ הרכיבים.

If you can, the easiest way to get feedback on this would be to share your repo. The files you shared above are not stand-alone and require a settings file as well.

Yes, sorry for not including that earlier. That would be:
https://github.com/NateDhaliwal/discourse-category-headers/tree/fix-compatibility-issues-new-new

(The fix-compatibility-issues-new-new branch.)

Thanks, I’ll take a closer look into that.

@Alteras It’s actually there, but not showing for some reason. Adding display: block !important made it appear, but the styling is now quite different

EDIT: Got the CSS fixed, and the headers are now displaying. Thanks so much @merefield @Alteras @manuel !

Seems to work fine now

I still get some undefined errors in the console. You should use optional chaining with the ?. operator when looking up nested structures. For example:

this.args.category.description?.replace

ראיתי גם את השגיאה הזו כשאין תיאור קטגוריה. תודה על ההצעה!