如何在 Ember 模板中显示 API 响应？

Question

我正在使用 Ember 从 REST API 中检索特定记录并将其显示在模板上。我可以控制台记录来自我的序列化程序的有效负载，它可以正确显示对象，但我的模板似乎无法访问它。

有效负载具有以下结构：

{ 
  _id: 5cb0f8bd3b74cf22b75e1a37,
  name: 'Mu',
  hour: 0,
  day: 0,
  week: 0,
  month: 0,
  year: 753,
  size: 1,
  detail: 1,
  createdAt: 2019-04-12T20:44:45.691Z,
  updatedAt: 2019-04-12T20:44:45.691Z,
  __v: 0 
}

我的 ember 路线如下所示：

import Route from '@ember/routing/route';

export default Route.extend({
  model() {
    this.get('store').find('world', '5cb0f8bd3b74cf22b75e1a37');
  },
})

我的适配器是这样的：

import DS from 'ember-data';

export default DS.RESTAdapter.extend({
  host: 'http://localhost:3000',
  pastForType() {
    return 'worlds';
  },
});

这是我的 ember 世界模型：

import Model from 'ember-data/model';
import DS from 'ember-data';

const { attr } = DS;

export default Model.extend({
  name: attr('String'),
  hour: attr('Number'),
  day: attr('Number'),
  week: attr('Number'),
  month: attr('Number'),
  year: attr('Number'),
  size: attr('Number'),
  detail: attr('Number')
});

负载由我的序列化程序规范化：

import DS from 'ember-data';

export default DS.RESTSerializer.extend({
  primaryKey: '_id',

  normalizeResponse(store, primaryModelClass, payload, id, requestType) {
    payload = { worlds: payload };
    console.log(payload);
    return this._super(store, primaryModelClass, payload, id, requestType);
  }
});

调用路由时，控制台输出：

Object { worlds: {…} }

对象内的数据是正确的，但是当我尝试在我的 handlebars 模板中访问 {{model.name}} 时，没有显示任何内容。

我是否未能以某种方式将对象传递给模板？我只是指错了吗？

Answer 1

用

替换您的模型挂钩

model() {
  return this.store.find('world', '5cb0f8bd3b74cf22b75e1a37');
}

Answer 2

如评论中所述，您在路线 model 挂钩中错过了 return。因此，即使您的 store.find() 请求使用预期记录正确解析，路由的模型也是 undefined。

如何在 Ember 模板中显示 API 响应？

How to display API response in Ember template?

ember.js

ember-data

ember-cli