需要关于Ember组件功能的一些指导

Question

我目前正在利用ember-cli-geolocate和ember-google-maps为用户提供与他们当前位置最近的兴趣点。我已经让代码在一个组件中工作，但现在已经意识到我无法排序。

以下代码：

//路由/葡萄园/ index.js

import Ember from 'ember';
import { later } from '@ember/runloop';
import { inject as service } from '@ember/service';
import $ from 'jquery';

const { Route, set } = Ember;

export default Route.extend({
  model() {
    return this.store.findAll('vineyard');
  },
  setupController(controller, model) {
    set(controller, 'vineyards', model);
  },
  activate() {
    this.controllerFor('vineyard/index').send('distanceFrom');
  }
});

//控制器/葡萄园/ index.js

import Ember from 'ember';
import { inject as service } from '@ember/service';
import $ from 'jquery';

export default Ember.Controller.extend({
  userLocation: null,
  endLocation: null,
  milesAway: null,
  locationIsLoading: true,
  failState: false,
  googleMapsApi: service(),
  geolocation: service(),
  panelActions: Ember.inject.service(),
  userLocationChanged: function () {
    this.get('userLocation');
    this.toggleProperty('locationIsLoading');
  }.observes('userLocation'),
  actions: {
    distanceFrom: function() {
      this.get('geolocation').trackLocation().then((geoObject) => {
        let currentLocation = this.get('geolocation').get('currentLocation');
        this.set('userLocation', currentLocation);
      }, (reason) => {
        // this.toggleProperty('failState');
        // $('.error').css('height', '220px');
        // $('.error > p').css('height', 'auto');
        console.log('Geolocation failed because ' + reason);
      });
    },
    stopError: function() {
      this.toggleProperty('failState');
      $('.error').css('height', '0');
      $('.location-loader').animate({opacity: '0'}, 1000);
    }
  },
});

组件/英里away.js

import Component from '@ember/component';
import { inject as service } from '@ember/service';
import { later } from '@ember/runloop';
import $ from 'jquery';

export default Component.extend({
  googleMapsApi: service(),
  geolocation: service(),
  userLocation: null,
  endLocation: null,
  milesAway: null,
  distanceLoading: true,
  errorState: false,
  fadeClass: '',
  didInsertElement() {
    this.set('self', this);
    var address = this.get('address');
    var location = this.get('location');
    var distanceLoading = this.get('distanceLoading');
    var userLocationLat = location[0];
    var userLocationLon = location[1];
    let userLocation = '' + userLocationLat + ',' + userLocationLon
    this.set('userLocation', userLocation);
    this.set('endLocation', address);
    this.send('getDistance');
  },
  actions: {
    getDistance: function() {
      // let milesAway = this.get('milesAway');
      let userLocation = this.get('userLocation');
      let endLocation = this.get('endLocation');
      this._super(...arguments);
      this.get('googleMapsApi.google').then((google) => {
        var self = this;
        let distanceMatrixService = new google.maps.DistanceMatrixService();
        function calculateDistance() {
          distanceMatrixService.getDistanceMatrix({
            origins: [userLocation],
            destinations: [endLocation],
            travelMode: google.maps.TravelMode.DRIVING,
            unitSystem: google.maps.UnitSystem.IMPERIAL,
            avoidHighways: false,
            avoidTolls: false
          }, callback);
        }
        function callback(response, status) {
          if (status != google.maps.DistanceMatrixStatus.OK) {
            self.toggleProperty('errorState');
          } else {
            // var origin = response.originAddresses[0];
            // var destination = response.destinationAddresses[0];
            if (response.rows[0].elements[0].status === "ZERO_RESULTS") {
              self.toggleProperty('errorState');
            } else {
              var distance = response.rows[0].elements[0].distance;
              // var distance_value = distance.value;
              var distance_text = distance.text;
              // const miles = distance_text.substring(0, distance_text.length - 3);
              self.toggleProperty('distanceLoading');
              self.set('milesAway', distance_text);
              later((function() {
                $('.miles-away').addClass('fade-in');
              }), 45);
            }
          }
        }
        calculateDistance();
      });
    },
  }

});

组件/英里away.hbs

{{#unless distanceLoading}}
  <div class="miles-away-container">
    <p class="miles-away">{{milesAway}}</p>
  </div>
{{/unless}}
{{yield}}

最后，渲染它的模板..（只提供一个片段）

模板/葡萄园/ index.hbs

   <div class="distance">
          {{#if failState}}
            {{svg-jar 'fail'}}
          {{/if}}
          {{#if locationIsLoading}}
            {{location-loader}}
            {{else}}
            {{miles-away location=userLocation address=vineyard.location}}
          {{/if}}
        </div>

我愿意以完全不同的方式实现这一点，我知道它甚至不接近正确或完美。