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

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

代码如下：

//routes/vineyard/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');
  }
});

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

//控制器/vineyard/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');
  }
});

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

组件/miles-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();
      });
    },
  }

});

组件/英里数。hbs

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

{{#除非距离加载}
{{milesAway}
{{/除非}
{{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>

{{#如果失败状态}
{{svg jar'fail'}}
{{/if}
{{#如果位置为加载}
{{location loader}}
{{else}
{{英里外位置=用户位置地址=葡萄园.location}
{{/if}

---

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

你说的“无法排序”是什么意思？你想排序什么？你会犯什么样的错误？排序的地方是hbs附带的任何js文件，其中包含一个

{{{{each}}

帮助程序（或者在控制器上，如果每个都在路由上），我尝试按最近的位置排序。我不确定如何按照现在的设置方式进行排序，而且似乎我无论如何都无法进行排序，因为直到列表/表格加载到模板上，位置才被提取。*距离位置的距离不被提取我想你可能想做的是，在任何时候，你都可以将所有数据作为集合（用户和所有葡萄园），定义一个计算属性，返回葡萄园记录的排序数组。在每个助手中使用该属性。您可以编写考虑地理数据的自定义排序