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响应中实际上缺少了模板中缺少的属性。

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

1 个答案: