Я в полном шоке. Я пытаюсь отрендерить компонент .gjs, но он не отображается. Я пробовал рендерить в тегах шаблона <h1>Hi</h1>, но даже это не работает. Что происходит?
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
api.renderInOutlet("above-main-container", <template><h1>Hi</h1></template>);
});
Я убрал импорт компонента, потому что он не рендерится ни с ним, ни без него.
Честно говоря, я не понимаю, что делаю не так.
Я просто ослеп от тупости. Файл был в api_initializers, а не в api-initializers 
.
Отлично… теперь мой компонент не рендерится…
У кого-нибудь есть идеи?
Мой файл api-initializers:
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 Я вроде бы всё исправил (кроме некоторых неясных ошибок Prettier:
, но я не думаю, что это может быть причиной?
Есть какие-то идеи?
Не уверен, какой у вас сейчас код после внесённых исправлений, но, судя по полученному предупреждению, div с классом .category-title-header хотя бы должен отображаться в DOM.
Рекомендую проверить страницу в браузере с помощью инструментов разработчика. Также попробуйте добавить множество вызовов console.log, чтобы отследить, на каком этапе приложения выполняется код. Альтернативно, для Chrome и Firefox доступно расширение Ember Inspector, которое позволяет просматривать дерево компонентов.
Если возможно, самый простой способ получить обратную связь по этому вопросу — поделиться вашим репозиторием. Файлы, которые вы привели выше, не являются автономными и требуют также файла настроек.
Да, извините, что не указал это ранее. Это:
https://github.com/NateDhaliwal/discourse-category-headers/tree/fix-compatibility-issues-new-new
(ветка fix-compatibility-issues-new-new.)
Спасибо, я внимательно изучу это.
@Alteras На самом деле оно там есть, но по какой-то причине не отображается. Добавление display: block !important заставило его появиться, но стилизация теперь сильно изменилась 
РЕДАКТИРОВАНИЕ: Исправил CSS, и заголовки теперь отображаются. Большое спасибо @merefield @Alteras @manuel!
Похоже, теперь всё работает отлично 
В консоли всё ещё появляются ошибки «undefined». При обращении к вложенным структурам используйте опциональную цепочку с оператором ?.. Например:
this.args.category.description?.replace
Я тоже только что увидел эту ошибку, когда нет описания категории. Спасибо за предложение!