无法解析 ember 中的 API 响应

Question

我正在尝试学习 EmberJS 和 restify。我有 get 方法 API，响应如下：

 {"products":[{"id":1,"name":"lappy1"},{"id":2,"name":"lappy2"}]}

我在浏览器的网络日志中收到此响应。

我的产品路线是这样的：

 import Ember from 'ember';
      export default Ember.Route.extend({
          model() {
              return {
                  products :this.get('store').findAll('product')
              };
          }
      });

我的 product.hbs 是：

<div>
<div class="row">
    <div class="col-md-4"><b>id</b></div>
    <div class="col-md-4"><b>Name</b></div>     
</div>
{{#each model.products as |product|}}
    <div class="row">
        <div class="col-md-4">{{product.id}}</div>
        <div class="col-md-4">{{product.name}}</div>
    </div>
{{/each}}
</div>

我的产品型号是：

import DS from 'ember-data';

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

日志上没有任何错误，但我的页面只显示 header 部分，即

<div class="col-md-4"><b>id</b></div>
<div class="col-md-4"><b>Name</b></div>

我错过了什么？

Answer 1

安装 Chrome Ember 插件并使用 Chrome 进行调试。

我假设您使用的是 RESTAdapter？

您的 Route 的 model 钩子 return 是一个对象，而不是一个承诺。这有点奇怪，我建议使用哈希：

model() {
  return Ember.RSVP.hash({
    products: this.store.findAll('product')
  });
}

或者，您可以 return 调用商店的结果：

model() {
  return this.store.findAll('product');
}

但在这种情况下，您可以将模板更改为仅使用 model 而不是 model.products。

无法解析 ember 中的 API 响应

unable to parse API response in ember

ember.js

ember-data

restify