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"
    }
]
}

应用程序/模板/ index.hbs

{{input value=search}}

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

应用程序/控制器/ index.js

import Ember from 'ember';

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

应用程序/模型/ 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')
});

应用程序/ 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;

应用程序/适配器/ application.js中

import DS from 'ember-data';

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

如果我从JSONAPIAdapter延伸,我收到此错误:

处理路由时出错:index断言失败:遇到具有未定义类型的资源对象(使用ui @ serializer解析的资源:-json-api :)

我改为从JSONAPISerializer扩展我的适配器,但只有另一个错误.

import DS from 'ember-data';

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

处理路由时出错:index断言失败:您尝试加载查询但您的适配器未实现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
    .
    ]
}

你可以用很少的外部组件,帮助生成烧瓶jsonAPI标准有效载荷:https://github.com/vertical-knowledge/ripozo/,https://github.com/benediktschmitt/py-jsonapi,https://开头的github的.com/xamoom/xamoom-詹纳斯

选项2 - 使用RESTAdapter

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

你可以重写改变您的适配器export default DS.JSONAPIAdapter.extend来export default DS.RESTAdapter.extend在/app/adapters/application.js.

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

{
  "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教程