如何让一个支持组件的服务提供承诺

Question

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

我想获得一个组件来呈现一个返回承诺的注入服务的基本属性。尽管我在其上创建了一个CP，但在承诺解决后仍无法解析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'), 
}); 

应用程序/荚/组件/较量米/模板。 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') 
}); 

应用程序/荚/组件/较量米/模板。 hbs

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