I’m legitimately freaking out. I am trying to render a .gjs component, but that doesn’t show up. I tried rendering in template tags Hi , but even that won’t show up. What is going on? import { apiInitializer } from "discourse/lib/api"; export default apiInitializer((api) => { api.renderInOutlet("above-main-container", Hi ); }); I’ve omitted the component import because it doesn’t render with/without it. I honestly don’t know what I’m doing wrong.

I am incredibly blind. The file was in api_initializers, not api-initializers :facepalm:.

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; } } {{#if this.showHeader}} {{#if this.ifParentProtected}} {{icon this.lockIcon}} {{/if}} {{#if this.ifParentCategory}} {{this.args.category.parentCategory.name}}: {{/if}} {{#if this.ifProtected}} {{icon this.lockIcon}} {{/if}} {{this.args.category.name}} {{#if this.catDesc}} {{this.args.category.description}} {{/if}} {{this.aboutTopicUrl}} {{/if}} } Everything looks technically correct, so why doesn’t it render :thinking:..? This may look familiar… yes, I’m trying to switch widgets for Glimmer components.

[图片] NateDhaliwal: Everything looks technically correct, so why doesn’t it render :thinking:..? How do you conclude that it looks correct, did you follow basic steps? Check eslint errors and warnings and resolve them Check console errors and warnings and resolve them

[图片] manuel: Check console errors and warnings and resolve them Didn’t see any so I skipped the first one. Turns out :facepalm: [A dark-themed interface displays a list of code linting tools—ESLint, Stylelint, Prettier, and Ember template lint—each marked with a red 'x' indicating errors. (Captioned by AI)]

@manuel So I’ve fixed everything (except for some vague Prettier errors: [A terminal window displays the output of running the command, followed by warnings about code style issues in several files and an error indicating the process completed with an exit code of 1. (Captioned by AI)] ) but nothing renders. Still no error in the browser console, except for a warning about [image] , but I don’t think that could be the cause? Any ideas?

I’m not sure what your current code is after your fixes, but seeing the warning you’re getting, the .category-title-header div should at least be rendering in the DOM. I recommend inspecting the page in your browser. Also, try tossing in a bunch of console.log to see where the application reaches the code. Alternatively, there is a the Ember Inspector browser extension available for Chrome and Firefox that will let you read the component tree.

[图片] NateDhaliwal: Any ideas? 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.) [图片] Alteras: I recommend inspecting the page in your browser. Also, try tossing in a bunch of console.log to see where the application reaches the code. Alternatively, there is a the Ember Inspector browser extension available for Chrome and Firefox that will let you read the component tree. 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 :slightly_frowning_face: EDIT: Got the CSS fixed, and the headers are now displaying. Thanks so much @merefield @Alteras @manuel !

Seems to work fine now :+1: 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

api.renderInOutlet 无法渲染？

开发

NateDhaliwal (Nate Dhaliwal) 2025 年6 月 27 日 07:24 2

我真是瞎了。文件在 api_initializers 里，而不是 api-initializers 。

话题		回复	浏览量
Cannot put the template in the desired outlet Development	12	525	2024 年10 月 14 日
Templating of my "component" broke. How do I fix it? Development	14	578	2026 年3 月 17 日
Overriding .gjs files - not possible? Development	2	689	2023 年10 月 10 日
Showing different content for mobile view in a .gjs file Development mobile , ember	5	271	2025 年7 月 18 日
Render a post above the discovery-list-container-top Outlet Development	7	327	2026 年1 月 25 日

api.renderInOutlet 无法渲染？

相关话题