带有 ember-data 和 ajax api 调用的工作流

Question

我在 routes/index.js 中有这段代码：

model() {
  return Ember.RSVP.hash({
    maps: ajax({
      url: '*********************',
      type: 'get' 
    }).then(function(data) {
      console.log('maps: ', data);
      return data; 
    })
  });
}

返回 json 数据。现在我想使用 ember-data 和模型，我在 models/map.js 中有这段代码：

import DS from "ember-data";

export default DS.Model.extend({
  gmap_lat_center: DS.attr('string'), 
  gmap_long_center: DS.attr('string'), 
  hotspots: DS.attr('array'), 
  id: DS.attr('string'), 
  image: DS.attr('array'), 
  image_highres: DS.attr('string'), 
  image_lowres: DS.attr('string'), 
  map_background: DS.attr('string'), 
  ne_lat: DS.attr('string'), 
  ne_long: DS.attr('string'), 
  order: DS.attr('string'), 
  sw_lat: DS.attr('string'), 
  sw_long: DS.attr('string'), 
  timestmap: DS.attr('string'), 
  title: DS.attr('string'), 
  track_geojson: DS.attr('string'), 
  type: DS.attr('string'), 
  zoom: DS.attr('string')
});

现在应该是 ajax 和 ember-data 的工作流程？我需要将 ajax 调用放在哪里以及将其存储在模型中的什么位置？

编辑： 我设法将它们推送到商店，但是当我尝试访问它时：

this.store.pushPayload( normalizedData );;
console.log( "maps: ", normalizedData );
console.log(this.store.findAll('map'));
return normalizedData;

我明白了：

http://localhost:4200/maps 404 (Not Found)

我想我需要重写适配器中的 findAll 方法，但是这个方法会是什么样子？

Answer 1

如果您从外部端点请求数据，我会使用 pushPayload() 通过 map 模型的序列化程序运行返回的数据：

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    const mapData = ajax({
      url: '*********************',
      type: 'get' 
    });

    return mapData.then((data) => {
      return this.store.pushPayload(data);
    });
  }
});

一旦你从路由的模型钩子中返回数据，它就会自动通过this.get('model')在相应的控制器中可用。

从您的示例看来，您可能希望在数据从服务器返回后对其进行操作。有几种常见的方法可以做到这一点。

1. 路由的setupController() 和afterModel() 挂钩。
2. 在路由对应的控制器中。

这是一个使用setupController()的例子：

import Ember from 'ember';

export default Ember.Route.extend({
  setupController(controller, model) {
    this._super(controller, model);
    this.set(controller, 'someAttrForTheController', 'anything');
    console.log('maps: ', model);
  }
});

以及相应控制器中的示例：

import Ember from 'ember';

export default Ember.Controller.extend({
  latLongCenters: Ember.computed('model', function() {
    const models = this.get('model');
    return model.map(function(map) {
      return [map.get('gmap_lat_center'), map.get('gmap_long_center')];
    });
  })
});