如何更有效地使用Ember中的适配器、序列化器、模型等工具？

Question

我有一个基于 Ember 数据 的应用程序。我想弄清楚如何使代码更紧凑。我的应用程序看起来像这样:: 有几个来自 Express 服务器的端点。在Ember应用程序中，每个端点对应于：适配器、序列化器、模型、路由、模板。一切正常，但是代码太繁琐了。我是 Ember 的新手，也许有一种方法可以更普遍地使用适配器和其他工具。以下是我的应用程序的一些部分，说明了它是如何工作的。

localhost:5000/api/cars

localhost:5000/api/vehicles

适配器“汽车”：

import RESTAdapter from '@ember-data/adapter/rest';
export default RESTAdapter.extend({
  host: http://localhost:5000/api,
  pathForType() {
    return "cars";
  }
});

适配器“车辆”：

import RESTAdapter from '@ember-data/adapter/rest';
export default RESTAdapter.extend({
  host: http://localhost:5000/api,
  pathForType() {
    return "vehicles";
  }
});

序列化器“汽车”：

import RESTSerializer from '@ember-data/serializer/rest';
export default RESTSerializer.extend({
  normalizeResponse(store, primaryModelClass, payload, id, requestType) {
    payload = {
      cars: payload
    };
    return this._super(store, primaryModelClass, payload, id, requestType);
  },
  primaryKey: '_id'
});

序列化器“车辆”：

import RESTSerializer from '@ember-data/serializer/rest';
export default RESTSerializer.extend({
  normalizeResponse(store, primaryModelClass, payload, id, requestType) {
    payload = {
      vehicles: payload
    };
    return this._super(store, primaryModelClass, payload, id, requestType);
  },
  primaryKey: '_id'
});

车型：

import DS from 'ember-data';
const { attr } = DS;
export default DS.Model.extend({
  name: attr("string"),
  body: attr("array"),
  date: attr('date')
});

车型（同车！）：

import DS from 'ember-data';
const { attr } = DS;
export default DS.Model.extend({
  name: attr("string"),
  body: attr("array"),
  date: attr('date')
});

汽车索引路线：

import Route from '@ember/routing/route';
export default class CarsIndexRoute extends Route {
  model() {
    return this.store.findAll("car");
  }
}

车辆索引路线：

import Route from '@ember/routing/route';
export default class VehiclesIndexRoute extends Route {
  model() {
    return this.store.findAll("vehicle");
  }
}

Hbs 模板完全相似。 cars/index.hbs（和 vehicles/index.hbs）：

{{#each @model as |item|}}
<h3>{{item.name}}</h3>
<p>{{item.body}}</p>
{{/each}}

代码清楚地表明结构是相同的，区别仅在于一个参数，对应模型名称和api端点的“结束”。有人可以告诉我如何按照 Ember 的传统更正确地组织所有内容吗？谢谢！

Answer 1

Ember 的优点在于它基于约定。在你的情况下，这意味着一旦 /cars 和 /vehicles 位于相同的端点（他们这样做）并且具有相同的结构（他们似乎也这样做）你只需要一个适配器和序列化程序全部。

import RESTAdapter from '@ember-data/adapter/rest';

export default class ApplicationAdapter extends RESTAdapter {
  host = "http://localhost:5000";
  namespace = 'api'
}

import RESTSerializer from '@ember-data/serializer/rest';

export default class ApplicationSerializer extends RESTSerializer {
  primaryKey = '_id';

  // not sure exactly what happens in the payload but I am pretty sure you'd be able to generalize it correspondingly
}

至于模型和路线，我会保留它们原样或在需要时提取超类。

如何更有效地使用Ember中的适配器、序列化器、模型等工具？

How to use adapters, serializers, models and other tools in Ember more effectively?

javascript

ember.js

ember-data