تحديثات مباشرة للمكونات

مطور
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 في كل عنصر من عناصر المصفوفة.

ولدي هذا الكود الجافاسكريبت الداعم:

...
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 وتحديث نموذج مخصص تم إضافته إلى مُسلسل الموضوع. إذا قمت بتحديث الصفحة، فكل شيء يكون متوقعًا، ولكني أريد أن يتم تحديث أزرار الراديو هذه مباشرة (في الوقت الحالي، تبقى أزرار راديو متعددة مضاءة إذا قمت بتغييرها عدة مرات).

وحدة التحكم الخاصة بي تفعل هذا:

      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)