Ember：在組件中使用服務

Question

我只是想在我的應用程序登陸頁面/ index/application.hbs中顯示我的經度。我很尷尬地說，我一直在這工作多久！誰能幫我？

//geoservice.js 
import Ember from 'ember'; 

export default Ember.Service.extend({ 
    longitude: function(position){ 
     return position.coords.longitude; 
    }, 
    latitude: function(position){ 
     return position.coords.latitude; 
    } 
}); 

//geo-component.js 
import Ember from 'ember'; 

export default Ember.Component.extend({ 
    geoservice: Ember.inject.service(), 
    myLongitude: function(){ 
      if (navigator.geolocation) { 
       return this.get('geoservice').longitude(navigator.geolocation.getCurrentPosition()); 
      } else { 
       return "Geolocation is not supported by this browser."; 
      } 
     }.on('init'), 
}); 

//application.hbs 
<h2 id="title">Welcome to Ember</h2> 

{{outlet}} 
{{geo-component.myLongitude}} 

Answer 1

問題不消耗在組件服務，但1）Geolocation API是異步的，和2）像你這樣，你不渲染的成分。這工作：

應用程序/組件/地理location.js

import Ember from 'ember'; 

export default Ember.Component.extend({ 
    geo: Ember.inject.service(), 
    loading: true, 
    error: null, 
    latitude: null, 
    longitude: null, 

    setPosition: Ember.on('init', function() { 
    this.get('geo').getPosition().then((position) => { 
     this.set('latitude', position.latitude); 
     this.set('longitude', position.longitude); 
     this.set('loading', false); 
    }).catch((error) => { 
     this.set('error', error); 
    }); 
    }) 
}); 

應用程序/服務/ geo.js

import Ember from 'ember'; 

export default Ember.Service.extend({ 
    getPosition() { 
    return new Ember.RSVP.Promise((success, error) => { 
     if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(success, error) 
     } else { 
     error(new Error("Geolocation is not supported by this browser.")); 
     } 
    }).then((position) => { 
     return { latitude: position.coords.latitude, longitude: position.coords.longitude }; 
    }); 
    } 
}); 

應用/模板/組件/地理location.hbs

{{#if error}} 
    {{error}} 
{{else if loading}} 
    Loading... 
{{else}} 
    lat: {{latitude}}, long: {{longitude}} 
{{/if}} 

應用程序/模板/ application.hbs

<h2 id="title">Welcome to Ember</h2> 

{{geo-location}}