Трекируемая переменная не найдена?

Разработка
1

Вот мой код:

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'; // Возврат к 'lock', если настройка не определена
  @tracked lockIcon = iconNode(this.iconName);

Раздражает, но в консоли браузера я вижу ошибку ReferenceError: iconName is not defined. Посмотрев на файл в инструментах разработчика браузера, я вижу следующее:

iconName = settings.category_lock_icon || 'lock'; // Возврат к 'lock', если настройка не определена
lockIcon = (0, _iconLibrary.iconNode)((void 0).iconName);

Это в сравнении с другим компонентом, который я создал и который использует отслеживаемые переменные (и работает):

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

где исходный код был таким:

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

Делаю ли я что-то не так?

2

Вам не нужно отслеживать эти значения. Они постоянны, поэтому это излишне. Отслеживайте только те данные, которые будут динамическими и при изменении которых вы хотите повторно вызвать геттеры.

Используйте DIcon, например: {{icon this.myIcon}}

Пример:

3

Понял. Спасибо за помощь; я попробую.

4

Каждый раз при отслеживании вы расходуете ресурсы, поэтому старайтесь минимизировать это. Не страшно, но это хорошая практика — не отслеживать изменения, если ничего не меняется во время посещения страницы.

В любом случае, я не думаю, что настройки обновятся без перезагрузки страницы.

5

Спасибо за совет! Я это запомню.

6
Привет @merefield, я не могу понять, как обойти эту функцию: 
function ifProtected() {
  if(category.read_restricted) {
    return this.lockIcon;
  }
}

Есть какие-нибудь советы, как мне это вернуть? Так как это находится в файле .gjs, возможно ли вернуть

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

?

РЕДАКТИРОВАНИЕ:
Я изменил их на:

const iconName = settings.category_lock_icon || 'lock'; // Возвращаем 'lock', если настройка не определена
const lockIcon = <template>{{icon this.iconName}}</template>

Спасибо за подсказку в правильном направлении!