工作流与余烬数据和AJAX API呼叫

Question

我有这样的代码中的路由/ index.js：

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

返回JSON数据。现在我想与Ember数据和模型的工作，我有这个代码在型号/ 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和灰烬数据的工作流程？我需要在哪里放置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')]; 
    }); 
    }) 
});