테마 컴포넌트에서 더 이상 JS가 작동하지 않음

개발
1

A little help with a CSS selector? 토론을 이어서 진행합니다:

안녕하세요,

얼마 전에 이 주제를 만들었고, 신뢰 수준에 대한 CSS 선택자를 생성하는 JavaScript가 정상적으로 작동했습니다. 하지만 더 이상 작동하지 않습니다. 이 것이 해당 JS 코드입니다…


import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => { 
  const allowedGroups = ["trust_level_4"]; // 대상이 되希리는 그룹을 추가하세요
  const includeUsersField = ["username"]; // "id" 또는 "username" 중 하나를 사용하세요

  api.modifyClass("component:chat/message/info", (SuperClass) => {
    return class extends SuperClass {
      @service currentUser;

      get usernameClasses() {
        if (!this.currentUser) {
          return super.usernameClasses;
        }
        const allowedGroupClasses = this.currentUser.groups
          .filter((g) => allowedGroups.includes(g.name))
          .map((g) => `group--${g.name}`);

        const extraClasses = [
          ...allowedGroupClasses,
          ...includeUsersField.map((f) => `user--${this.currentUser[f]}`),
        ]
          .filter(Boolean)
          .join(" ");

        return super.usernameClasses + " " + extraClasses;
      }
    };
  });
})

그리고 제가 사용했던 CSS는 다음과 같습니다…

.chat-message-info__username.group–trust_level_4 {
.chat-message-info__username__name {
color: blue;
}
}

이 문제를 수정하는 방법에 대해 아이디어가 있을까요?

구체적으로, 제가 알아야 할 Discourse 업데이트가 있는 건가요, 아니면 tl4가 주요 그룹(primary group)이 아니기 때문인 건가요, 혹은 다른 이유가 있을까요?

감사합니다!

2

서비스 데코레이터를 가져오기만 하면 작동할 것입니다:

import { service } from "@ember/service";

이 코드를 추가하면 @service currentUser가 다시 올바르게 로드됩니다.

3

수정: 스크립트에 넣었지만 여전히 작동하지 않습니다.

4

브라우저 콘솔에 표시되는 에러를 공유해 주실 수 있나요? 도움이 될 수 있습니다.

5

현재 CSS를 제거한 후, 다음 CSS를 추가해 보시겠어요?

.chat-message-info__username.group--trust_level_4 .chat-message-info__username__name {
  color: blue !important;
}