javascript - Ember 中的应用程序无法识别该模型，因此最终索引数据为空

Question

几周前我开始了与 Ember 的冒险。得益于互联网上的文档和示例，我取得了坚实的进步。

可悲的是，我在这个问题上碰壁了，因为几乎是复制粘贴的模型，其中大多数有效，只有一个无效。

我在 Inspector 中看到的错误是:

Encountered a resource object with type "series", but no model was found for model name "series" (resolved model name using 'my-app@serializer:-json-api:.modelNameFromPayloadKey("series"))
Error while processing route: serie.index data is null...

我成功地使用了 Mirage 装置

// mirage/fixtures/files.js
export default [
{duration:'1',filename:'1.mkv',size:'1',id:'1',url:'dl/1.mkv'},
{duration:'2',filename:'2.mkv',size:'2',id:'2',url:'dl/2.mkv'}
];

// mirage/fixtures/series.js
export default [
{type:'show',title:'ser1',summary:'123',id:'11'},
{type:'show',title:'ser2',summary:'234',id:'12'}
];

两者都使用相同的海市蜃楼模型

// mirage/model/file.js
// mirage/model/serie.js
import { Model } from 'ember-cli-mirage';
export default Model.extend({
});

我以这种方式加载固定装置:

// mirage/scenarios/default.js
export default function(server) {
server.loadFixtures();
}

序列化器是这样设置在 mirage 上的:

// mirage/serializers/application.js
import { JSONAPISerializer } from 'ember-cli-mirage';
export default JSONAPISerializer.extend({
});

我唯一添加到配置中的是

// added to mirage/config.js
this.namespace = 'api';
this.get('/series');
this.get('/series/:id');
this.get('/files');
this.get('/files/:id');

与 mirage 没有更多关系，所以让我们转到 ember。

// app/adapters/application.js
application.js 
import DS from 'ember-data';
export default DS.JSONAPIAdapter.extend({
    namespace: 'api'
});

两者使用相同的组件

// app/components/file-view.js
// app/components/serie-view.js
import Ember from 'ember';
export default Ember.Component.extend({
});

模型是这样定义的:

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

export default DS.Model.extend({
    filename: DS.attr(),
    url: DS.attr(),
    art: DS.attr()
});

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

export default DS.Model.extend({
    title: DS.attr(),
    type: DS.attr(),
    summary: DS.attr()
});

// app/router.js
import Ember from 'ember';
import config from './config/environment';

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

Router.map(function() {
  this.route('serie', function() {
    this.route('show');
  });
  this.route('file', function() {
    this.route('show');
  });
});

export default Router;

路线几乎相同

// app/routes/file.js
import Ember from 'ember';

export default Ember.Route.extend({
        model() {
                return this.get('store').findAll('file');
        }
});

// app/routes/serie.js
import Ember from 'ember';

export default Ember.Route.extend({
    model() {
        return this.get('store').findAll('serie');
    }
});

模板也是如此

// app/templates/file.hbs
<h2>Files</h2>

{{#each model as |fileUnit|}}
    {{file-view file=fileUnit}}
{{/each}}
{{outlet}}

// app/templates/serie.hbs
<h2>Series</h2>

{{#each model as |serieUnit|}}
    {{serie-view serie=serieUnit}}
{{/each}}
{{outlet}}

最后是组件模板:

// app/templates/components/file-view.js
<div>
<img src="cover.jpg" width=200 hight=200 alt="">
<h3>{{file.filename}} id: {{file.id}}</h3>
</div>

// app/templates/components/serie-view.js
<div>
<h3> {{serie.title}} id: {{serie.id}}</h3>
Summary: {{serie.summary}}
</div>

当 http://localhost:4200/file 工作时 http://localhost:4200/serie 抛出错误

我试图通过删除不必要的代码和模型来解决这个问题，这样我就可以缩小问题的范围，但最终得到了两个非常相似的模型，它们的功能几乎是复制粘贴的，但只有一个有效。

我真的不知道这是关于什么的。

Answer 1

你的错误给了你一个提示

Encountered a resource object with type "series", but no model was found for model name "series" (resolved model name using 'my-app@serializer:-json-api:.modelNameFromPayloadKey("series"))

问题是 ember knows如何在 files 和 file 之间切换，但不能在 series 和 serie 之间切换，因为单词 series 是不规则的 ( both singular and plural )，因此 serie 不是其正确的单数形式。

覆盖 modelNameFromPayloadKey序列化程序中的方法返回键 'series' 的正确模型名称:

export default DS.JSONAPISerializer.extend({
  modelNameFromPayloadKey(key) {
    // if payload model name is 'series', use 'serie'
    if (key === 'series') { 
      return 'serie';
    }
    // otherwise do the default thing
    return this._super(...arguments);
  }
});