Ember Web App - 无法显示 JSON 数据 - 打开天气地图 API

Question

我是 Ember 应用程序开发的新手，我不知道如何让数据显示在不同的页面上。

我相信 Ember 术语...我有一个主应用程序，我目前拥有的唯一路线称为“请求位置”。 “app/routes/request-location.js”有一个 Model() 钩子，它在那里调用 Open Weather Map API（我尝试将它放入适配器中，但我无法弄清楚，因为我得到了这个响应我正在发布关于它的工作）。

我尝试将数据推送到商店，正如您从注释掉的区域看到的那样（这是另一篇帖子的显示方式）。我尝试使用的适配器是 JSONAPIAdapter，但我也尝试了 RESTAdapter。我尝试了以下使用 Normalizer 和 Serializer 的教程，但我没有任何运气。

我可以读取 responseJSON.name（或其他任何内容）中的每条数据。我知道我的模型只有名称，目前我只是想在获得其余数据之前先让它工作。我只是不知道如何让它显示在 request-location.hbs 文件中。下面是我的代码。提前感谢您的所有帮助。

我假设我没有正确地将对象存储到 Ember 中的 DS。我尝试通过 push 和 pushPayload 将其推送到商店。两者似乎都没有产生任何东西。我在下面尝试了一条评论，在其中添加了 Ember.RSVP.Promise( Function(resolve) 等...但是当应该只有 1 个名称并且列表变为空白时，这给了我 5 个列表。-更新

// routes/request-location.js

import Ember from 'ember';
import config from '../config/environment';

export default Ember.Route.extend({
  model() {
    var key = config.myApiKey;
    var location = "denver";
    var url = 'http://api.openweathermap.org/data/2.5/weather?q=' + location + '&appid=' + key;
    console.log('url: ' + url);
    Ember.$.getJSON(url).then((responseJSON) => {

      console.log('name: ' + responseJSON.name);

      //this.store.pushPayload(responseJSON.name); //.results);
      return responseJSON.name;
    });
  }
});

// Returned JSON Object

{
    "coord": {
        "lon": -0.13,
        "lat": 51.51
    },
    "weather": [{
        "id": 701,
        "main": "Mist",
        "description": "mist",
        "icon": "50d"
    }, {
        "id": 741,
        "main": "Fog",
        "description": "fog",
        "icon": "50d"
    }],
    "base": "stations",
    "main": {
        "temp": 279.4,
        "pressure": 1011,
        "humidity": 93,
        "temp_min": 278.15,
        "temp_max": 280.15
    },
    "visibility": 8000,
    "wind": {
        "speed": 2.6,
        "deg": 30
    },
    "clouds": {
        "all": 90
    },
    "dt": 1485766200,
    "sys": {
        "type": 1,
        "id": 5091,
        "message": 0.191,
        "country": "GB",
        "sunrise": 1485762062,
        "sunset": 1485794844
    },
    "id": 2643743,
    "name": "London",
    "cod": 200
}

<!-- /templates/request-location.hbs -->

<h2>Request-location Weather Data</h2>

<div class="container">
  <ul>
    {{#each model as |location|}}
      <li>{{location.name}}</li>
    {{/each}}
  </ul>
</div>

// /models/request-location.js

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr()
});

Answer 1

只需从钩子中返回值：

// routes/request-location.js

import Ember from 'ember';
import config from '../config/environment';

export default Ember.Route.extend({
  model() {
    var key = config.myApiKey;
    var location = "denver";
    var url = 'http://api.openweathermap.org/data/2.5/weather?q=' + location + '&appid=' + key;
    return new Ember.RSVP.Promise(function(resolve){
       Ember.$.getJSON(url).then((responseJSON) => {
          resolve([responseJSON]);
       });
    });
  }
});

ps：根据cmets更新代码。