ember.js - 在 ember js 中使用和绑定 JSONAPI 属性数据

Question

我有一个 ember.js 玩具应用程序，我想将它挂接到 JSONAPI REST 服务以获取和显示数据。我可以在浏览器的开发者控制台中追踪到，ember-data 确实启动了适当的 GET 请求并接收到正确、有效的 JSONAPI 响应主体。

// ./app/models/person.js
import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  email: DS.attr('string'),
  birthdate: DS.attr('string')
});
// ./app/adapters/person.js
import ApplicationAdapter from './application';

export default ApplicationAdapter.extend({
  pathForType() {
    return "persons";
  }
});
// ./app/adapters/application.js
import DS from 'ember-data';

export default DS.JSONAPIAdapter.extend({
    host: 'http://localhost:5000'
});
// ./app/router.js
import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: config.locationType,
  rootURL: config.rootURL
});

Router.map(function () {
  this.route('persons', function() {
    this.route('show', { path: '/:person_id' });
  });
});
export default Router;
// ./app/routes/persons/show.js
import Route from '@ember/routing/route';

export default Route.extend({
  model(params) {
    return this.get('store').findRecord('person', params.person_id);
  }
});
// ./app/routes/persons/index.js
import Route from '@ember/routing/route';

export default Route.extend({
  model() {
    return this.get('store').findAll("person");
  }
});
// ./app/routes/application.js
import Route from '@ember/routing/route';

export default Route.extend({
});
// ./app/app.js
import Application from '@ember/application';
import Resolver from './resolver';
import loadInitializers from 'ember-load-initializers';
import config from './config/environment';

const App = Application.extend({
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix,
  Resolver
});

loadInitializers(App, config.modulePrefix);

export default App;
// ./app/resolver.js
import Resolver from 'ember-resolver';

export default Resolver;

不幸的是，当我想在我的模板中使用模型时，我只能访问元素 id，而不能访问数据属性name（如渲染时保持为空）。

<!-- ./app/templates/persons/index.hbs -->
{{#each model as |person index|}}
<li>
    Person {{person.id}} {{index}}
    {{person.name}}
    {{#link-to 'persons.show' person }}
    Link {{index}}
    {{/link-to}}
</li>
{{/each}}

我有点不知所措为什么会发生这种情况。难道我做错了什么？

Answer 1

发布的代码很好，我在模板中缺少的属性实际上是 HTTP 响应中缺少的。