如何讓一個支持組件的服務提供承諾

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}}