Question

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

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

我正在使用它作为服务，因为此功能存在于导航栏中，其寿命比任何路线长，我正在尝试使用ember2.0。

应用程序/服务/ 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
    });
  })
});

应用程序/荚/组件/竞赛米/ component.js

import Ember from 'ember';

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

应用程序/荚/组件/竞赛米/ template.hbs

{{contest.startDate}}

Answer 1

只需使用服务中的已加载属性来确定数据是否已加载。

应用程序/服务/ 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);
      });
  })
});

应用程序/荚/组件/竞赛米/ 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')
});

应用程序/荚/组件/竞赛米/ template.hbs

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

如何使ember组件从服务中呈现承诺

1 个答案: