慢 Ember 计算属性

Question

我在我的模型中构建了一个计算属性，以使用用户位置和兴趣点位置（在本例中为葡萄园）计算到某个位置的距离。计算似乎需要一秒钟，即使没有设置 milesAway 属性，模板也会呈现。从而无法呈现相关信息。有任何想法吗？型号代码如下...

import DS from 'ember-data';
import attr from 'ember-data/attr';
import { belongsTo, hasMany } from 'ember-data/relationships';
import EmberObject, { computed, observer } from '@ember/object';
import { inject as service } from '@ember/service';

export default DS.Model.extend({
  featuredImages: hasMany('contentful-asset'),
  featured: attr('boolean'),
  name: attr('string'),
  slug: attr('string'),
  rating: attr('number'),
  location: attr('string'),
  latitude: attr('string'),
  longitude: attr('string'),
  bodyOne: attr('string'),
  milesAway: attr('string', {async: false}),
  googleMapsApi: Ember.inject.service(),
  googleLocation: computed(function() {
    let userLocation = 'Hard Coded Test Address';
    let endLocation = this.get('location');
    let milesAway = '';
    let googleMapsApi = this.get('googleMapsApi');
    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 {
          if (response.rows[0].elements[0].status === "ZERO_RESULTS") {
            self.toggleProperty('errorState');
          } else {
            var distance = response.rows[0].elements[0].distance;
            var distance_text = distance.text;
            self.set('milesAway', distance_text);
          }
        }
      }
      calculateDistance();
    });
  })
});

Answer 1

有几件事很突出......

您的计算属性googleLocation 缺少它的依赖项，这将阻止它被更新。至少应该列出location。

此外，计算属性是“纯函数”，因此无论何时执行它们都没有副作用。因此，与其在计算函数中设置milesAway，不如从计算函数返回一个值，也可以将其命名为milesAway。我不能对距离计算部分发表太多评论，因为我自己还没有这样做。

你应该从你的代码中删除这一行：

milesAway: attr('string', {async: false}),

并执行类似以下结构的操作：

milesAway: computed('location', function() {
    let location = this.get('location');

    // Your code to calculate the distance

    return distance;  
})

但是，模型本质上是为持久数据而不是瞬态应用程序数据而设计的。对于使用此模型的每个葡萄园，milesAway 会因用户而异（我看到您在处理此问题时有一个硬编码的 userLocation）。因此，您可能希望将此计算属性移出模型并移入组件或控制器中。因此，在您的组件或控制器中，您将拥有：

milesAway: computed('model.location', function() {
    let location = this.get('model.location');

    // Your code to calculate the distance

    return distance;  
})