Live-Updates zu Komponenten

Entwickler
1

Ich habe eine Komponente, die so aussieht:

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

Die Bewertungen sind ein Array, das dem Topic-View-Serializer hinzugefügt wird und in jedem Array-Element topic_id und rating_id enthält.

Und ich habe diesen unterstützenden JS-Code:

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

Es funktioniert wie erwartet. Und wenn ich auf einen der RadioButtons klicke, ruft er eine Funktion auf, die einen POST durchführt und ein benutzerdefiniertes Modell aktualisiert, das dem Topic-Serializer hinzugefügt wird. Wenn ich die Seite neu lade, ist alles wie erwartet, aber ich möchte, dass diese Radiobuttons live aktualisiert werden (derzeit bleiben mehrere Radiobuttons leuchtend, wenn Sie sie mehrmals ändern).

Mein Controller macht Folgendes:

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

Ich denke also, dass die Sachen, die in den angezeigten Topics in der Topic-Liste aktualisiert werden sollten.

Ich glaube, das Problem ist, dass ich @discourseComputed anstelle von get verwenden muss, aber wenn ich das tue, erhalte ich einen Fehler. Vielleicht kann ich @discourseComputed nicht in einer Komponente verwenden? Vielleicht muss ich etwas anderes tun?

EDIT: Ich habe ChatGPT gefragt und es sagt, dass ich etwas mit import { tracked } from '@glimmer/tracking'; tun muss, also versuche ich das jetzt. . .

1 „Gefällt mir“
2

Ich habe es also getan. Ich glaube, diese Teile könnten für jemand anderen hilfreich sein, also hier ist, was mir in der Komponente gefehlt hat:

Das ist weit davon entfernt, eine allgemein nützliche Dokumentation zu sein, aber vielleicht hilft sie jemandem, wenn er sie braucht (oder vielleicht finde ich sie beim nächsten Mal, wenn ich sie brauche!).

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

 constructor() {
    super(...arguments);
    this.userRatings = this.args.topic.user_ratings;  // Initialisiere getrackte Eigenschaft
    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;
    }

....
 // und dann in der Aktion, die den Wert ändert:
        this.myRating = Number(newStatus);
2 „Gefällt mir“