Ember Serializer
Emberjs uses JSONAPISerializer by default, and we used JSONAPISerializer in our project. So it’s just about JSONAPISerializer. @[TOC]
Front-end and back-end communication protocols
In the current version, we use the big hump method to name the back end, but the front end basically uses the hump method, resulting in some differences. In the process of data acquisition and display, we need to unify the name of the key. We can then use the keyForAttribute method to implement our requirements, such as:
// Back-end data
{
'data': [{
'type': 'people'.'id': '123'.'attributes': {
'FirstName': 'Jeff'.'LastName': 'Atwood'.'Birthday': new Date().getTime()
}
}, {
'type': 'people'.'id': '124'.'attributes': {
'FirstName': 'Yehuda'.'LastName': 'Katz'.'Birthday': new Date('the 2011-11-11 11:11:11').getTime()
}
}]
};
Copy the codeOn the front end we define a property called:
// person/model.js
import DS from 'ember-data';
export default DS.Model.extend({
firstName: DS.attr('string'),
lastName: DS.attr('string'),
birthday: DS.attr('date')});Copy the codeThe front-end uses the common hump nomenclature. In this case, we need to modify the attribute name applied by the back-end to properly transfer the back-end data to the attribute name defined by the front-end:
// person/serializer.js
import DS from 'ember-data';
import { camelize, capitalize } from '@ember/string';
export default DS.JSONAPISerializer.extend({
keyForAttribute(key) {
let newKey = camelize(key);
returncapitalize(newKey); }});Copy the codeKeyForAttribute The keyForAttribute method takes an attribute name defined on the front end as a parameter, such as the current firstName, and converts it to the same attribute name on the back end, such as firstName. In this way, the communication between the front and back ends can be achieved.
Front-end modelName changes
As you can see above, the back end returns Data with a type of people, but the front end looks for a type of Person because of the convention in Ember Data, but what if we just want it to look for a type of people? We need to use the modelNameFromPayloadKey method:
// people/serilizer.js
import DS from 'ember-data';
import { camelize, capitalize } from '@ember/string';
export default DS.JSONAPISerializer.extend({
modelNameFromPayloadKey(key) {
return key;
},
keyForAttribute(key) {
let newKey = camelize(key);
returncapitalize(newKey); }});Copy the codeOverwrite this method to disallow the singular and plural conversions of ModelNames. Currently, we execute the serializer methods under a separate model. If we need to use the serializer globally, we need to write the serializer. Js file under application [1]. And then there’s payloadKeyFromModelName
IDs
Each entry in the JSONAPI should use the value of the id as an id, both on the front and back ends. If the back end does not use the id as a unique id, a primaryKey property can be used to define a unique id: this is what the front end defines:
// people/serilizer.js
import DS from 'ember-data';
import { camelize, capitalize } from '@ember/string';
export default DS.JSONAPISerializer.extend({
primaryKey: 'pKey',
modelNameFromPayloadKey(key) {
return key;
},
keyForAttribute(key) {
let newKey = camelize(key);
returncapitalize(newKey); }});Copy the codeThe data from the backend can be changed to:
// Back-end data
{
'data': [{
'type': 'people'.'pKey': '123'.'attributes': {
'FirstName': 'Jeff'.'LastName': 'Atwood'.'Birthday': new Date().getTime()
}
}, {
'type': 'people'.'pKey': '124'.'attributes': {
'FirstName': 'Yehuda'.'LastName': 'Katz'.'Birthday': new Date('the 2011-11-11 11:11:11').getTime()
}
}]
};
Copy the codeShortened attribute name
One of the challenges in daily work is naming, and often the backend name and the front-end name do not match. If we do a lot of presentation work, it is a bit troublesome to change the name. In this case, we can use the attrs attribute to achieve our purpose:
// ...
ThePersonSelfHeight:176
// ...
Copy the codeThe front-end thinks the name is too complex and thinks alias:
// people/serilizer.js
import DS from 'ember-data';
export default DS.JSONAPISerializer.extend({
primaryKey: 'pKey'.attrs: {
height: 'ThePersonSelfHeight'
},
// ...
});
Copy the codeYou also need to modify the model.js file accordingly:
// people/model.js
// ...
height: DS.attr('number')
// ...
Copy the codeHeight Displays the value of the ThePersonSelfHeight property.
Format Response
At work, the data that comes back from the back end tends to be a little bit nested or the backend people have their own way of thinking and the structure of the data is a little bit different from what we expect. At this point we can implement our requirements through serialize() and normalizeResponse(). For example, the data sent to us by the back end is as follows:
data: {
type: 'phone'.id: 1.attributes: {
brand: 'Nokia'.capacity: 64.size: {
width: 70.9.height: 143.6.depth: 7.7.weight: 177
},
display: 5.8}}Copy the codeWe want to show depth directly in the data display, instead of taking it from size:
// phone/model.js
import DS from 'ember-data';
export default DS.Model.extend({
brand: DS.attr('string'),
capacity: DS.attr('number'),
depth: DS.attr('number'),
display: DS.attr('number')});Copy the codenormalizeResponse()
We can do this with the normalizeResponse() method in serializer.js:
// phone/serializer.js
// ...
normalizeResponse(store, primaryModelClass, payload, id, requestType) {
payload.data.attributes.depth = payload.data.attributes.size.depth;
delete payload.data.attributes.size;
return this._super(... arguments); }Copy the codeThen in route.js we request data:
// route.js
// ...
model() {
return this.get('store').queryRecord('phone'}, {})Copy the codeSo we can get depth directly from the page:
<tr>
<td>{{model.brand}}</td>
<td>{{model.capacity}}</td>
<td>{{model.depth}}</td>
<td>{{model.display}}</td>
</tr>
Copy the codeIn addition to the normalizeResponse() method, there are several other methods, such as:
normalize()
// phone/serializer.js
// ...
normalize(typeClass, hash) {
hash.attributes.depth = hash.attributes.size.depth;
delete hash.attributes.size;
return this._super.apply(this.arguments);
}
Copy the codeCan do the same thing. This method can define specific typeClass in the application for the call.
normalizeQueryRecordResponse()
In this article we get the data using queryRecord(), so we can also use:
// phone/serializer.js
// ...
normalizeQueryRecordResponse(store, primaryModelClass, payload, id, requestType) {
payload.data.attributes.depth = payload.data.attributes.size.depth;
delete payload.data.attributes.size;
return this._super(... arguments); },Copy the codenormalizeFindAllResponse()
The same can also be associated, when we obtain the data is:
// route.js
mode() {
return this.get('store').findAll('phone');
}
Copy the codeIn this case, you can use:
// phone/serializer.js
normalizeFindAllResponse(store, primaryModelClass, payload) {
let data = payload.data.attributes;
payload.data.attributes.depth = data.size ? data.size.depth : data.depth;
delete payload.data.attributes.size;
return this._super(... arguments); }Copy the codeWe can still get what we want. Emberjs also provides other Normalize hooks:
normalizeFindBelongsToResponse()normalizeFindHasManyResponse()normalizeFindManyResponse()normalizeFindRecordResponse()normalizeQueryResponse()
Other requests to modify the creation.
normalizeCreateRecordResponse()
To use this hook, we need to start by creating a record:
// arcicle/route.js or controller.js
let articles = this.get('store').createRecord('article', {
id: new Date().getTime(),
title: 'how to use serialize'.body: 'let try'
});
Copy the codeAfter the Record is created, the corresponding Data can be viewed in the Data in the EmberInspector. At the same time in the serializer. Add normalizeCreateRecordResponse js () :
// article/serializer.js
import DS from 'ember-data';
export default DS.JSONAPISerializer.extend({
normalizeCreateRecordResponse(store, primaryModelClass, payload, id, requestType) {
console.log(payload);
return this._super(...arguments);
}
});
Copy the codeThe browser sees that the hook is not executed. This hook is executed when the record is saved:
// article/route.js or controller.js
// ...
articles.save()
Copy the codeAfter the refresh can see normalizeCreateRecordResponse () have been executed this hook. Similarly, other updates/deletions are similar:
- normalizeDeleteRecordResponse
- normalizeSaveResponse
- normalizeUpdateRecordResponse
The related properties and method of ds.jsonapiserialize have now been explained.
Written By FrankWang.
-
The serializer. Js file is stored in the application folder at the top level and follows the model name, not the route name. ↩ ︎