Sifat yang dikira Ember.js jangan tunggu janji RSVP async

Question

Saya mempunyai komponen Ember.js dan saya cuba menggunakan sifat yang dikira untuk menentukan keterlihatannya berdasarkan hasil janji RSVP tak segerak. Walau bagaimanapun, harta yang dikira nampaknya tidak menunggu janji diselesaikan, menyebabkan objek count tidak ditentukan.

Berikut ialah petikan kod komponen saya:

import Component from '@ember/component';
import { computed } from '@ember/object';
import { inject as service } from '@ember/service';
import RSVP from 'rsvp';

export default Component.extend({
    classNames: ['count'],
    countService: service('count'),

    getCount: computed(function () {
        debugger;
        RSVP.all([
            this.get('countService').getCount()
        ]).then(([count]) => {
            return Number(count);
        });
    }),

    isVisible: computed('getCount', function () {
        debugger;
        let count = this.get('getCount');
        return count !== undefined && count > 0;
    }),
});

Seperti yang anda lihat, harta getCount yang dikira sedang memanggil kaedah countService getCount() pada perkhidmatan yang disuntik. Kaedah ini mengembalikan janji yang diselesaikan dengan nilai kiraan.

Dalam harta yang dikira isVisible, saya cuba mengakses nilai count yang dikembalikan oleh harta yang dikira getCount. Walau bagaimanapun, apabila saya log nilai count semasa penyahpepijatan, nilai itu muncul sebagai undefined, walaupun janji itu sepatutnya telah diselesaikan setakat ini.

Saya tidak pasti mengapa hartanah yang dikira tidak menunggu janji diselesaikan sebelum cuba mengakses nilai. Adakah saya kehilangan sesuatu dalam pelaksanaan saya? Adakah terdapat cara yang lebih baik untuk mengendalikan kebergantungan tak segerak dalam sifat dikira Ember.js?

Sebarang bantuan atau pandangan akan sangat dihargai!

Answer 1

Sudikah anda mencubanya sekali? Saya belum mengujinya lagi, tetapi semoga ini masuk akal.

import Component from '@ember/component';
import { computed } from '@ember/object';
import { inject as service } from '@ember/service';
import RSVP from 'rsvp';

export default Component.extend({
  classNames: ['count'],
  countService: service('count'),

  getCount: computed(function() {
    return RSVP.all([this.get('countService').getCount()]).then(([count]) => {
      return Number(count);
    });
  }),

  isVisible: computed('getCount', function() {
    let count = this.get('getCount');
    return count !== undefined && count > 0;
  }),
});