Ember.js 余烬：使用组件中的服务

我只想在我的应用程序登录页/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}}

//geoservice.js
从“余烬”导入余烬；
导出默认的Ember.Service.extend({
经度：功能（位置）{
返回position.coords.longitude；
},
纬度：功能（位置）{
返回位置坐标纬度；
}
});
//geo-component.js
从“余烬”导入余烬；
导出默认的Ember.Component.extend({
geoservice:Ember.inject.service（），
我的长度：函数（）{
if（导航器.地理位置）{
返回此.get（'geoservice'）.longitude（navigator.geolocation.getCurrentPosition（））；
}否则{
return“此浏览器不支持地理位置。”；
}
}.on（'init'），
});
//application.hbs
欢迎来到恩伯
{{outlet}}
{{geo component.mylongients}

问题不是在组件中使用服务，而是1）地理定位API是异步的，2）您没有像以前那样呈现组件。这项工作：

app/components/geo-location.js

app/services/geo.js

app/templates/components/geo-location.hbs

app/templates/application.hbs

欢迎来到余烬
{{地理位置}

地理定位API是通过对象发布的。哇，谢谢！这是一个巨大的帮助。你能告诉我关于=>？这是合法的javascript操作符吗？

（）=>{}

是ES6功能的缩写，用于

函数（）{}

，请参阅。ember cli用于将ES6转换为ES5，以便在当今的浏览器中工作。：）@RonRoyston认为，这种语法还有一个额外的优点，就是将函数体中的

this

绑定到封闭范围的

this

，而不是Javascript的不确定默认值

window

。（在本例中，

此

将引用您的地理位置组件实例。）

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

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

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

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

{{geo-location}}