javascript - 如何使 Ember 组件呈现服务 promise

如何呈现等待服务注入的Promise的UI？

我正在尝试获取一个组件以呈现返回承诺的注入服务的基本属性。尽管我在其上创建了CP，但在兑现承诺后，它仍无法解析UI。

我将此服务用作服务，因为此功能位于导航栏中，该导航栏中的寿命比任何路线的寿命都长，并且我尝试使用ember2.0。

app / services / contest.js

import Ember from 'ember';

export default Ember.Service.extend({
  store: Ember.inject.service(),

  contest: Ember.computed(function() {
    return this.get('store').find('contest', {
      current: true
    });
  })
});

app / pods / components / contest-meter / component.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: 'contest-meter',
  contest: Ember.inject.service('contest'),
});

app / pods / components / contest-meter / template.hbs

{{contest.startDate}}

最佳答案

只需在服务中使用loaded属性即可确定数据是否已加载。

app / services / contest.js

import Ember from 'ember';

const { inject, on } = Ember;

export default Ember.Service.extend({
  store: inject.service(),

  findCurrentContest: on('init', function() {
      this.get('store').find('contest', {
          current: true
      }).then((response) => {
          this.set('contest', response);
          this.set('loaded', true);
      });
  })
});

app / pods / components / contest-meter / component.js

import Ember from 'ember';

const { computed, inject } = Ember;

export default Ember.Component.extend({
  classNames: 'contest-meter',
  contest: inject.service(),
  currentContest: computed.readOnly('contest.contest')
});

app / pods / components / contest-meter / template.hbs

{{#if contest.loaded}}
   {{currentContest.startDate}}
{{else}}
   Loading...
{{/if}}