Verfolgte Variable nicht gefunden?

Das ist mein Code:

import { apiInitializer } from "discourse/lib/api";
import { iconNode } from "discourse-common/lib/icon-library";
import { tracked } from "@glimmer/tracking";

export default apiInitializer((api) =
> {
  @tracked iconName = settings.category_lock_icon || 'lock'; // Fallback auf 'lock', wenn die Einstellung nicht definiert ist
  @tracked lockIcon = iconNode(this.iconName);

Frustrierenderweise meldet mir die Browserkonsole ReferenceError: iconName is not defined. Wenn ich die Datei in den Browser-Entwicklertools anschaue, sieht sie so aus:

iconName = settings.category_lock_icon || 'lock'; // Fallback auf 'lock', wenn die Einstellung nicht definiert ist
lockIcon = (0, _iconLibrary.iconNode)((void 0).iconName);

Dies, verglichen mit einer anderen Komponente, die ich erstellt habe und die getrackte Variablen verwendet (und funktioniert):

#buttonIcon = (() =
> (dt7948.i(this, "buttonIcon"), void 0))();

, wobei der ursprüngliche Code lautet

@tracked buttonIcon = localStorage.getItem('buttonIcon') != null ? localStorage.getItem('buttonIcon') : "bug";

Mache ich etwas falsch?

Diese müssen nicht verfolgt werden. Sie werden konstant sein, daher unnötig. Verwenden Sie stattdessen DIcon.

Ich verstehe. Danke für die Hilfe; ich werde es ausprobieren.

Jedes Mal, wenn Sie etwas verfolgen, verbrauchen Sie Ressourcen, daher sollten Sie dies auf ein Minimum beschränken. Es ist keine große Sache, aber es ist eine gute Praxis, nichts zu verfolgen, wenn sich etwas während eines Seitenbesuchs nicht ändert. Ich bin sicher, Sie können eine Seitenaktualisierung zwischen Einstellungsänderungen erwarten.

Danke für den Rat! Das werde ich mir merken.

Hallo @merefield, ich komme bei dieser Funktion nicht weiter:

function ifProtected() {
  if(category.read_restricted) {
    return this.lockIcon;
  }
}

Irgendeinen Rat, wie ich das zurückgeben könnte? Da dies in einer .gjs-Datei ist, ist es möglich,

return <template>{{icon this.iconName}}</template>

zurückzugeben?