emberjs 2 连接到 api flask - 遇到类型未定义的资源对象

Question

我正在学习 Ember，经过一些基本测试后，我尝试连接我的 API 以创建一个搜索组件。

API 'application/vnd.api+json'

{
  "data": [
    {
      "expediente": "1717801",
      "fecha_de_presentacion": "01/02/2016 12:00:00 AM",
      "figura_juridica": "REGISTRO DE MARCA",
      "logotipo": null,
      "signo": "IGUY",
      "tipo": "NOMINATIVA",
      "titular": "SAMSONITE IP HOLDINGS S.\u00c0.R.L."
    },
    {
      "expediente": "1717793",
      "fecha_de_presentacion": "01/02/2016 12:00:00 AM",
      "figura_juridica": "REGISTRO DE MARCA",
      "logotipo": "1_files/direct_151.gif",
      "signo": "URGOSTART",
      "tipo": "MIXTA",
      "titular": "HCP HEALTHCARE ASIA PTE. LTD"
    },
    {
      "expediente": "1717780",
      "fecha_de_presentacion": "02/02/2016 12:00:00 AM",
      "figura_juridica": "REGISTRO DE MARCA",
      "logotipo": null,
      "signo": "SKALAR",
      "tipo": "NOMINATIVA",
      "titular": "SKALAR HOLDING B.V."
    },
    {
      "expediente": "1717811",
      "fecha_de_presentacion": "02/02/2016 12:00:00 AM",
      "figura_juridica": "REGISTRO DE MARCA",
      "logotipo": "1_files/direct_189.gif",
      "signo": "MELI MELO",
      "tipo": "MIXTA",
      "titular": "MELI\u00b4MELO\u00b4 LIMITED"
    }
]
}

app/templates/index.hbs

{{input value=search}}

<ul>
  {{#each model as |trademark|}}
    <li>{{trademark.signo}}</li>
  {{/each}}
</ul>

app/controller/index.js

import Ember from 'ember';

export default Ember.Controller.extend({
  queryParams: ['search'],
  search: ""
});

app/models/trademarks.js

import DS from 'ember-data';
export default DS.Model.extend({
  figura_juridica: DS.attr('string'),
  expediente: DS.attr('string'),
  titular: DS.attr('string'),
  signo: DS.attr('string'),
  tipo: DS.attr('string'),
  fecha_de_presentacion: DS.attr('date'),
  logotipo: DS.attr('string')
});

app/route.js

import Ember from 'ember';
import config from './config/environment';

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

Router.map(function() {
  this.route('trademarks');
});

export default Router;

app/adapters/application.js

import DS from 'ember-data';

  export default DS.JSONAPIAdapter.extend({
  host: 'http://localhost:5000',
  namespace: 'v1'
});

如果我从 JSONAPI 适配器 扩展，我得到这个错误：

Error while processing route: index Assertion Failed: Encountered a resource object with an undefined type (resolved resource using ui@serializer:-json-api:)

我从 JSONAPISerializer 更改为扩展我的适配器，但只收到另一个错误。

import DS from 'ember-data';

  export default DS.JSONAPISerializer.extend({
  host: 'http://localhost:5000',
  namespace: 'v1'
});

Error while processing route: index Assertion Failed: You tried to load a query but your adapter does not implement query EmberError@http://localhost:4200/assets/vendor.js:26674:1

Answer 1

选项 1 - 使用 JSONAPIAdapter

开箱即用 Ember.js 期望服务器以 JSONApi 标准响应。你可以在这里看到这个标准：http://jsonapi.org/

当您使用 JSONAPIAdapter 时，您的服务器响应应如下所示：

{
  "data": [
    {
      "type": "trademarks",
      "id": "1",
      "attributes": {
        "expediente": "1717801",
        "fecha_de_presentacion": "01/02/2016 12:00:00 AM",
        "figura_juridica": "REGISTRO DE MARCA",
        "logotipo": null,
        "signo": "IGUY",
        "tipo": "NOMINATIVA",
        "titular": "SAMSONITE IP HOLDINGS S.\u00c0.R.L."
      }
    },
    {
     "type": "trademarks",
      "id": "2",
      "attributes": {
        "expediente": "1717793",
        "fecha_de_presentacion": "01/02/2016 12:00:00 AM",
        "figura_juridica": "REGISTRO DE MARCA",
        "logotipo": "1_files/direct_151.gif",
        "signo": "URGOSTART",
        "tipo": "MIXTA",
        "titular": "HCP HEALTHCARE ASIA PTE. LTD"
      }
    },
    .
    . rest of the data
    .
    ]
}

您可以使用一些外部包来帮助从 flask 生成 jsonAPI 标准负载：https://github.com/vertical-knowledge/ripozo/, https://github.com/benediktschmitt/py-jsonapi, https://github.com/xamoom/xamoom-janus

选项 2 - 使用 RESTAdapter

http://emberjs.com/api/data/classes/DS.RESTAdapter.html

您可以通过在 /app/adapters/application.js 中将 export default DS.JSONAPIAdapter.extend 重写为 export default DS.RESTAdapter.extend 来更改您的适配器。

在这种情况下，您的服务器负载应如下所示：

{
  "trademarks": [
    {
      "id": "1"
      "expediente": "1717801",
      "fecha_de_presentacion": "01/02/2016 12:00:00 AM",
      "figura_juridica": "REGISTRO DE MARCA",
      "logotipo": null,
      "signo": "IGUY",
      "tipo": "NOMINATIVA",
      "titular": "SAMSONITE IP HOLDINGS S.\u00c0.R.L."
    },
    {
      "id": "2"
      "expediente": "1717793",
      "fecha_de_presentacion": "01/02/2016 12:00:00 AM",
      "figura_juridica": "REGISTRO DE MARCA",
      "logotipo": "1_files/direct_151.gif",
      "signo": "URGOSTART",
      "tipo": "MIXTA",
      "titular": "HCP HEALTHCARE ASIA PTE. LTD"
    },
    .
    .
    .
    ]
}

如果你正在学习Ember.js，我写了一个关于最新Ember的免费教程，也许它也可以帮助：Ember.js tutorial

emberjs 2 连接到 api flask - 遇到类型未定义的资源对象

emberjs 2 connect to an api flask - Encountered a resource object with an undefined type

flask

ember.js

ember-cli

选项 1 - 使用 JSONAPIAdapter

选项 2 - 使用 RESTAdapter