Ember 模型与以 REST 形式接收的 JSON 数据挂钩

Question

我真的是 ember 的新手，我正在尝试使用我的 REST 后端发送 JSON 数据（我正在使用带有 Django JSON API 的 Django REST 框架），但我遇到了一些奇怪的错误。

火狐

错误：

Error while processing route: sampledata.index data is null _pushInternalModel@http://localhost:4200/assets/vendor.js:76923:11 push@http://localhost:4200/assets/vendor.js:76900:31

还有一个警告：

WARNING: Encountered a resource object with type "sampledata", but no model was found for model name "sampledatum" (resolved model name using 'frontend@serializer:application:.modelNameFromPayloadKey("sampledata")).

铬

错误：

Error while processing route: sampledata.index Cannot read property 'type' of null TypeError: Cannot read property 'type' of null
at Class._pushInternalModel (http://localhost:4200/assets/vendor.js:76923:27)
at Class.push (http://localhost:4200/assets/vendor.js:76900:36)
at http://localhost:4200/assets/vendor.js:77627:15
at Object.run (http://localhost:4200/assets/vendor.js:10805:25)
at Class._adapterRun (http://localhost:4200/assets/vendor.js:77149:31)
at http://localhost:4200/assets/vendor.js:77624:13
at tryCatch (http://localhost:4200/assets/vendor.js:63933:14)
at invokeCallback (http://localhost:4200/assets/vendor.js:63948:15)
at publish (http://localhost:4200/assets/vendor.js:63916:9)
at http://localhost:4200/assets/vendor.js:42181:7logError @ ember.debug.js:28535error @ ember.debug.js:28478triggerEvent @ ember.debug.js:28594trigger @ ember.debug.js:53473trigger @ ember.debug.js:53287(anonymous function) @ ember.debug.js:53107tryCatch @ ember.debug.js:53806invokeCallback @ ember.debug.js:53821publish @ ember.debug.js:53789publishRejection @ ember.debug.js:53724(anonymous function) @ ember.debug.js:32054invoke @ ember.debug.js:333flush @ ember.debug.js:397flush @ ember.debug.js:205end @ ember.debug.js:560run @ ember.debug.js:682join @ ember.debug.js:702run.join @ ember.debug.js:21181hash.success @ rest.js:910fire @ jquery.js:3187fireWith @ jquery.js:3317done @ jquery.js:8757(anonymous function) @ jquery.js:9123
other error.. TypeError: Cannot read property 'type' of null

我发送的数据是：

{
    "links": {
        "first": "http://localhost:8000/api/sampledata?page=1",
        "last": "http://localhost:8000/api/sampledata?page=1",
        "next": null,
        "prev": null
    },
    "data": [{
        "type": "sampledata",
        "id": "4",
        "attributes": {
            "blind_id": "1-146788",
            "aliquots_circulation": 9,
            "total_dna": 120,
            "data_type": "WES"
        },
        "relationships": {
            "projects": {
                "data": [],
                "meta": {
                    "count": 0
                }
            }
        }
    }],
    "meta": {
        "pagination": {
            "page": 1,
            "pages": 1,
            "count": 1
        }
    }
}

我的 ember 模型（/app/models/sampledata.js）：

import DS from 'ember-data';

export default DS.Model.extend({
  blind_ID: DS.attr('string'),
  aliquotsCirculation: DS.attr('number'),
  totalDna: DS.attr('number'),
  dataType: DS.attr('string'),
  projects: DS.hasMany('project')
});

我的适配器（/app/adapters/application.js）：

import DS from 'ember-data';
import ENV from 'frontend/config/environment';

export default DS.JSONAPIAdapter.extend({
  host: ENV.host,
  namespace: 'api'
});

我的序列化程序（/app/serializers/application.js）

import DS from 'ember-data';

export default DS.JSONAPISerializer.extend({

});

如果我将序列化程序更改为

export default DS.RESTSerializer.extend({
  primaryKey: '_id',
  serializeId: function(id) {
    return id.toString();
  }
});

我收到以下 警告 并且没有错误，但没有显示任何数据：

WARNING: Encountered "links" in payload, but no model was found for model name "link" (resolved model name using frontend@serializer:application:.modelNameFromPayloadKey("links"))
vendor.js (line 16826)
WARNING: Encountered "data" in payload, but no model was found for model name "datum" (resolved model name using frontend@serializer:application:.modelNameFromPayloadKey("data"))

Answer 1

这是一个错字。您扩展适配器而不是序列化程序。

//(/app/serializers/application.js)

    import DS from 'ember-data';

    export default DS.JSONAPISerializer.extend({

    });

解决警告

WARNING: Encountered a resource object with type "sampledata", but no model was found for model name "sampledatum" (resolved model name using 'frontend@serializer:application:.modelNameFromPayloadKey("sampledata")).

像这样在序列化程序中覆盖：

modelNameFromPayloadType(type){
  if(type === 'sampledata') return type;
  return this._super(...arguments);
}

Answer 2

我终于在几个小时后弄明白了。

Ember 有一个叫做 Inflector 的东西，它把我的单词“data”复数为“datum”。这就是为什么它没有找到我的模型，这就是为什么按照建议将我的模型更改为 sample-data.js 不起作用的原因。

参考这里：https://guides.emberjs.com/v2.0.0/models/customizing-adapters/#toc_pluralization-customization

两种解决方案：

1) 重命名模型和模板。模型应该是单数，模板应该是复数

2) 使用 Ember.Inflector (/app.js)

import Ember from 'ember';
export function initialize(/* container, application */) {
  var inflector = Ember.Inflector.inflector;
  inflector.uncountable('sampledata');
}

export default {
  name: 'inflector',
  initialize: initialize
};