Javascript 在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/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/serializers/application.js
import { JSONAPISerializer } from 'ember-cli-mirage';
export default JSONAPISerializer.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;

序列化程序按如下方式设置在mirage上：

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

// mirage/serializers/application.js
import { JSONAPISerializer } from 'ember-cli-mirage';
export default JSONAPISerializer.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;

我唯一添加到配置中的是

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

海市蜃楼已经没什么关系了，让我们进入余烬吧

// 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({
});

模型的定义如下：

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

// mirage/serializers/application.js
import { JSONAPISerializer } from 'ember-cli-mirage';
export default JSONAPISerializer.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/file.hbs
文件夹
{{{#每个模型作为|文件单元}
{{file view file=fileUnit}
{{/每个}}
{{outlet}}
//app/templates/serie.hbs
系列
{{{#每个模型作为|序列单元}
{{serie view serie=serieUnit}
{{/每个}}
{{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>

//app/templates/components/file-view.js
{{file.filename}}id:{{file.id}
//app/templates/components/serie-view.js
{{serie.title}}id:{{serie.id}
摘要：{{serie.Summary}

和as

http://localhost:4200/file

在

http://localhost:4200/serie

抛出一个错误

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

---

我真的不知道这是怎么回事。

你的错误给了你一个提示

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如何在

文件

和

文件

之间切换，而不是在

系列

和

系列

之间切换，因为

系列

这个词是不规则的（），所以

系列

不是它正确的单数形式

重写序列化程序中的方法以返回键的正确型号名称

'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);
  }
});

---

制作app/serializers/application.js并添加

从“余烬数据”导入DS；导出默认的DS.JSONAPISerializer.extend（{modelNameFromPayloadKey（key）{//如果有效负载模型名称为'series'，如果（key=='series'），则使用'serie'{返回'serie'；}//否则，默认操作将返回此值。_super（…arguments）；}）帮助。在发布正确的解决方案之前，我发现在模型中将serie.js重命名为series.js也有帮助，因为它试图强制绑定到该名称的模型。奇怪的事。。。我认为这是一个名字，但不知道为什么，我认为这是'类型'属性，而不是名称od模型。再次感谢