컴포넌트 실시간 업데이트

개발
1

다음과 같은 컴포넌트가 있습니다:

<td class="topic-rating">
  <span class="rating-title">{{ratingName}}</span> 
     <form>
        <input type="hidden" name="topic_id" value="{{topic.id}}">
        {{#unless useNames}}{{ratingLow}}{{/unless}}
        {{#each this.ratingOptions as |option|}}
            <RadioButton
              @name={{option.name}}
              @value={{option.value}}
              @selection={{this.myRating}}
              @onChange={{this.submitRating}}
            />
            {{#if useNames}} <span class="rotated-label">{{option.label}}</span>{{/if}}
        {{/each}}
        {{#unless useNames}}{{ratingHigh}}{{/unless}}
    </form>
</td>

평점은 topic_view 시리얼라이저에 추가된 배열이며, 각 배열 항목에는 topic_id와 rating_id가 포함되어 있습니다.

그리고 다음과 같은 지원 JS 코드가 있습니다:

...
export default class TopicRatingComponent extends Component {
  get myRating() { 
    const ratingId = this.args.id;
    const rating = this.args.topic.user_ratings.find((rating) => Number(rating.rating_id) === Number(ratingId));
    return rating?.rating_value;
  }
...

기대대로 작동합니다. RadioButton 중 하나를 클릭하면 POST 요청을 수행하고 토픽 시리얼라이저에 추가된 커스텀 모델을 업데이트하는 함수가 호출됩니다. 페이지를 새로 고침하면 모든 것이 기대대로 표시되지만, 라디오 버튼이 실시간으로 업데이트되기를 원합니다(현재 여러 번 변경하면 여러 라디오 버튼이 켜진 상태로 유지됩니다).

제 컨트롤러는 다음과 같이 처리합니다:

      MessageBus.publish("/topic/#{params[:topic_id]}", reload_topic: true)

따라서 토픽 목록에 표시되는 토픽들이 업데이트되어야 한다고 생각합니다.

문제는 get 대신 @discourseComputed를 사용해야 하는 것 같다는 생각인데, 그렇게 하면 오류가 발생합니다. 아마 컴포넌트에서 @discourseComputed를 사용할 수 없는 걸까요? 아니면 다른 어떤 작업을 해야 하는 걸까요?

수정: ChatGPT에게 물어보니 import { tracked } from '@glimmer/tracking';을 사용하여 무언가를 해야 한다고 하네요. 그래서 지금 그 방법을 시도하고 있습니다…

2

그래서 결국 해냈습니다. 이 내용들이 다른 누군가에게 도움이 될 수 있을 것 같아, 컴포넌트에서 제가 놓치고 있었던 부분을 공유합니다:

이것은 일반적으로 유용한 문서라고 하기는 어렵지만, 누군가 필요할 때 도움이 될 수도 있겠고 (아니면 다음에 제가 필요할 때 다시 찾을 수도 있겠네요!).

import { tracked } from '@glimmer/tracking';
...
  @tracked myRating

 constructor() {
    super(...arguments);
    this.userRatings = this.args.topic.user_ratings;  // tracked 프로퍼티 초기화
    if (!this.args.topic.user_ratings) {
      return [];
    }
    const ratingId = this.args.id;
    const rating = this.args.topic.user_ratings.find((rating) => Number(rating.rating_id) === Number(ratingId));
    this.myRating = rating?.rating_value;
    }

....
 // 그리고 값을 변경하는 액션에서는:
        this.myRating = Number(newStatus);