Les propriétés calculées d'Ember.js n'attendent pas les promesses RSVP asynchrones

Question

J'ai un composant Ember.js et j'essaie d'utiliser une propriété calculée pour déterminer sa visibilité en fonction des résultats d'une promesse RSVP asynchrone. Cependant, la propriété calculée ne semble pas attendre que la promesse soit résolue, ce qui fait que l'objet count n'est pas défini.

Voici un extrait de mon code composant :

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;
    }),
});

Comme vous pouvez le voir, la propriété calculée getCount appelle la méthode countService getCount() sur le service injecté. Cette méthode renvoie une promesse résolue avec une valeur de comptage.

Dans la propriété calculée isVisible, j'essaie d'accéder à la valeur count renvoyée par la propriété calculée getCount. Cependant, lorsque j'enregistre la valeur de count pendant le débogage, elle apparaît comme undefined, même si la promesse aurait dû être résolue à ce stade.

Je ne sais pas pourquoi les propriétés calculées n'attendent pas que la promesse soit résolue avant d'essayer d'accéder à la valeur. Est-ce que j'ai raté quelque chose dans ma mise en œuvre ? Existe-t-il une meilleure façon de gérer les dépendances asynchrones dans les propriétés calculées d'Ember.js ?

Toute aide ou idée serait grandement appréciée !

Answer 1

Voudriez-vous l'essayer une fois ? Je ne l'ai pas encore testé, mais j'espère que cela a du sens.

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;
  }),
});