jeudi 2 avril 2020

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

I have an app based on Ember Data. I would like to figure out how to make the code more compact. My application looks like this:: there are several endpoints that from the Express server. In the Ember application, each endpoint corresponds to: adapter, serializer, model, route, template. Everything works fine, but the code is too cumbersome. I'm new to Ember, and maybe there is a way to use adapters and other tools more universally. Here are some parts of my application that illustrate how it works.

localhost:5000/api/cars

localhost:5000/api/vehicles

Adapter "cars":

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

Adapter "vehicles":

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

Serializer "cars":

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'
});

Serializer "vehicles":

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'
});

Car model:

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

Vehicle model (the same as car!):

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

Cars index route:

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

Vehicles index route:

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

Hbs templates are completely similar. cars/index.hbs (and vehicles/index.hbs):


<h3></h3>
<p></p>

The code clearly shows that the structure is the same, and the differences are only in one parameter, which corresponds to the model name and the "end" of the api endpoint. Can someone tell me how to organize everything more correctly, in the tradition of Ember? Thanks!




Aucun commentaire:

Enregistrer un commentaire