组件的实时更新

开发
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;
  }
...

它的运行符合预期。当我点击 RadioButtons 时，它会调用一个函数，该函数执行 POST 并更新添加到 topic 序列化器的自定义模型。如果我重新加载页面，一切都符合预期，但我希望这些单选按钮能够实时更新（目前，如果您多次更改，多个单选按钮会保持点亮状态）。

我的控制器执行此操作：

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

所以，我认为这些东西应该在主题列表中显示的主题中得到更新。

我认为问题是我需要使用 @discourseComputed 而不是 get，但当我这样做时，我会收到一个错误。也许我不能在组件中使用 @discourseComputed？也许我需要做一些……别的事情？

编辑：我问了 ChatGPT，它说我需要做一些关于 import { tracked } from '@glimmer/tracking'; 的事情，所以我现在正在尝试……

1 个赞
2

所以，我做到了。我认为这些片段可能对其他人有所帮助，所以这是我在组件中遗漏的内容：

这远非通用的有用文档，但也许它能在某人需要时帮助到他们（或者下次我需要时能帮到我自己！）。

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

 constructor() {
    super(...arguments);
    this.userRatings = this.args.topic.user_ratings;  // 初始化跟踪属性
    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);
2 个赞