api.renderInOutlet rendert nicht?

[NateDhaliwal]

Ich gerate ehrlich gesagt in Panik. Ich versuche, eine .gjs-Komponente zu rendern, aber sie wird nicht angezeigt. Ich habe versucht, in Template-Tags <h1>Hi</h1> zu rendern, aber selbst das wird nicht angezeigt. Was ist los?

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

Ich habe den Komponentenimport weggelassen, da er weder mit noch ohne ihn gerendert wird.

Ich weiß ehrlich gesagt nicht, was ich falsch mache.

[NateDhaliwal]

Ich bin unglaublich blind. Die Datei war in api_initializers, nicht api-initializers .

[NateDhaliwal]

Großartig… jetzt wird meine Komponente nicht gerendert…

---

Hat jemand Ideen?
Meine api-initializers-Datei:

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

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

Und meine Komponente (.gjs)-Datei:

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

Alles sieht technisch korrekt aus, warum wird es dann nicht gerendert …?

Das kommt Ihnen vielleicht bekannt vor… ja, ich versuche, Widgets durch Glimmer-Komponenten zu ersetzen.

[manuel (Manuel Kostka)]

@NateDhaliwal

Alles sieht technisch korrekt aus, warum wird es nicht gerendert ..?

Wie kommst du zu dem Schluss, dass es korrekt aussieht, hast du die grundlegenden Schritte befolgt?

1. Überprüfe Eslint-Fehler und Warnungen und behebe sie
2. Überprüfe Konsolenfehler und Warnungen und behebe sie

[NateDhaliwal]

@manuel

Überprüfen Sie Konsolenfehler und -warnungen und beheben Sie diese

Ich habe keine gesehen, also habe ich die erste übersprungen.

Stellt sich heraus:

[NateDhaliwal]

@manuel Ich habe also alles behoben (bis auf ein paar vage Prettier-Fehler:

), aber nichts wird gerendert. Immer noch kein Fehler in der Browserkonsole, außer einer Warnung bezüglich

, aber ich glaube nicht, dass das die Ursache sein könnte?

Irgendwelche Ideen?

[Alteras (Steven Chang)]

Ich bin mir nicht sicher, wie Ihr aktueller Code nach Ihren Korrekturen aussieht, aber angesichts der Warnung, die Sie erhalten, sollte das .category-title-header-Div zumindest im DOM gerendert werden.

Ich empfehle Ihnen, die Seite in Ihrem Browser zu inspizieren. Versuchen Sie auch, mehrere console.log-Anweisungen einzufügen, um zu sehen, bis wohin die Anwendung den Code erreicht. Alternativ gibt es die Browser-Erweiterung Ember Inspector für Chrome und Firefox, mit der Sie den Komponentenbaum lesen können.

[manuel (Manuel Kostka)]

@NateDhaliwal

Irgendwelche Ideen?

Wenn Sie können, ist der einfachste Weg, Feedback dazu zu erhalten, Ihr Repository zu teilen. Die oben geteilten Dateien sind nicht eigenständig und erfordern auch eine Einstellungsdatei.

[NateDhaliwal]

Ja, Entschuldigung, dass ich das nicht früher erwähnt habe. Das wäre:
https://github.com/NateDhaliwal/discourse-category-headers/tree/fix-compatibility-issues-new-new

(Der Branch fix-compatibility-issues-new-new.)

@Alteras

Ich empfehle, die Seite in Ihrem Browser zu inspizieren. Versuchen Sie auch, eine Reihe von console.log einzufügen, um zu sehen, wohin die Anwendung den Code erreicht. Alternativ gibt es die Ember Inspector Browsererweiterung für Chrome und Firefox, mit der Sie den Komponentenbaum lesen können.

Danke, ich werde mir das genauer ansehen.

[NateDhaliwal]

@Alteras Es ist tatsächlich da, aber aus irgendeinem Grund wird es nicht angezeigt. Das Hinzufügen von display: block !important hat es erscheinen lassen, aber das Styling ist jetzt ganz anders

EDIT: Habe das CSS behoben und die Header werden jetzt angezeigt. Vielen Dank @merefield @Alteras @manuel !

[manuel (Manuel Kostka)]

Scheint jetzt gut zu funktionieren

Ich bekomme immer noch einige undefinierte Fehler in der Konsole. Sie sollten optional chaining mit dem ?.-Operator verwenden, wenn Sie verschachtelte Strukturen nachschlagen. Zum Beispiel:

this.args.category.description?.replace

[NateDhaliwal]

Ich habe diesen Fehler auch gerade gesehen, wenn keine Kategoriebeschreibung vorhanden ist. Danke für den Vorschlag!