Ember数据未填充模型

Ember data not populating model

本文关键字:模型 填充 数据 Ember      更新时间:2023-09-26

我正试图从我的Rails API中获取一些数据并将其显示在模板中。我对ember很陌生,所以解释越简单越好,如果这是一个非常愚蠢的问题,请原谅我。

问题似乎是api数据没有正确到达模型,当我有静态fixture数据但没有服务器数据时,它可以工作。对服务器的Get请求正在进行中,我得到了很好的响应,所以json移动到模型的方式肯定有问题。

我在routes/external/jobs.js 中的路线

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

});

我在models/job.js 的工作模式

import DS from 'ember-data';
export default DS.Model.extend({
    title: DS.attr('string'),
    id: DS.attr('string')
});

我希望我的API以的形式返回数据

{
  "jobs": [
      {
        id: "jfdsa132113",
        title: "developer",
        type: "Job",
        body: "lorem ipsum",
        published_at: date,
        tags: [
              "some stuff",
              "more stuff"
        ]
      },
      {
        id: "fdsafd3432",
        title: "designer",
        type: "Job",
        body: "lorem ipsum",
        published_at: date,
        tags: [
              "some stuff",
              "more stuff"
        ]
      }
   ]
}

我的路由器

Router.map(function () {
 //index route
this.route('external', function () {
   this.route('jobs');
   this.route('support');
});
export default Router;

我认为您对DS.Model s有误解,您应该看看指南,特别是http://guides.emberjs.com/v2.1.0/models/finding-records/.

假设路由和模板设置正确,并且ApplicationAdapter正在扩展RESTAdapter/ActiveModel Adapter(请参阅此处的预期JSON格式),我认为问题出在models/jobs.js中,这是不必要的。

EmberData应该在执行store.findAll('job')时向/jobs发出正确的请求。尝试删除models/jobs.jsadapters/jobs.js,然后执行以下操作:

// routes/external/jobs.js
import Ember from 'ember';
export default Ember.Route.extend({
  model() {
    return this.store.findAll('job');
  }
});

如果这没有帮助,也可以尝试张贴你的路由器和任何错误。

假设您的模型从API加载良好,我认为问题就在您的模板中。

根据文档,您需要显式地访问每个模型的属性。http://guides.emberjs.com/v2.1.0/templates/displaying-a-list-of-items/

因此,与其使用{{title}},不如使用{{job.title}}

{{#each model as |job|}}
   <a href={{job.title}}>
      <div class="info">
          <div class="title">{{job.body}}</div>
      </div>
   </a>
{{/each}}

这修复了

添加文件serializers/job.js带有线路

import DS from 'ember-data';
   export default DS.ActiveModelSerializer.extend(DS.EmbeddedRecordsMixin, {
});

我没有构建api,我注意到一些id被强调了约定。更多信息可以在这里阅读http://ember-doc.com/classes/DS.ActiveModelSerializer.html