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

我添加到配置中的唯一内容是

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

模型以这种方式定义：

// 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"))

问题在于，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);
  }
});

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

1 个答案: