추적 변수를 찾을 수 없나요?

개발
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);

반면, 트래킹 변수(tracked variables)를 사용하여 잘 작동하는 다른 컴포넌트와 비교해 보면 다음과 같습니다:

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

여기서 원래 코드는 다음과 같습니다:

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

제가 무언가를 잘못하고 있는 건가요?

2

이들을 추적할 필요는 없습니다. 값이 일정하므로 추적할 필요가 없습니다. 동적으로 변하는 값, 즉 게터(getter)를 다시 실행하고 싶은 값만 추적하면 됩니다.

대신 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>

올바른 방향으로 이끌어 주셔서 감사합니다!