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

Question

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

本地主机：5000/api/汽车

localhost:5000/api/车辆

适配器“汽车”：

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 模板完全相似。 汽车/index.hbs（和车辆/index.hbs）：

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

代码清楚地表明结构相同，区别仅在于一个参数，对应模型名称和api端点的“end”。 有人能告诉我如何按照 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
}

至于模型和路线，如果需要，我会保持原样或提取超类。