摘要：默認(rèn)使用，在我們的項(xiàng)目中也是使用所以只是涉及關(guān)于的相關(guān)內(nèi)容。這樣來(lái)達(dá)到前后端通信的要求。這個(gè)方法可以在中定義特定的來(lái)針對(duì)調(diào)用。同理，其他的更新刪除相似至此的相關(guān)屬性與已解釋完成。

Emberjs 默認(rèn)使用 JSONAPISerializer ，在我們的項(xiàng)目中也是使用JSONAPISerializer.所以只是涉及關(guān)于 JSONAPISerializer 的相關(guān)內(nèi)容。
@[TOC]

在目前的版本中，后端我們使用 大駝峰法命名，但是前端基本使用都是 駝峰法，導(dǎo)致有所差異，在數(shù)據(jù)獲取展示過(guò)程中，需要統(tǒng)一 key 的名稱。這時(shí)就可以使用 keyForAttribute 這個(gè)方法來(lái)實(shí)現(xiàn)我們的需求，比如：

//    后端數(shù)據(jù)
{
    "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("2011-11-11 11:11:11").getTime()
        }
    }]
};

而在前端 我們定義的屬性名為:

//    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")
});

前端使用的是 常用的駝峰命名法，在這樣的情形下(前后端屬性名字不一致)，我們就需要修改向后端申請(qǐng)的屬性名稱來(lái)將后端數(shù)據(jù)合理的傳遞到我們前端定義的屬性名上來(lái)：

//    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);
        return capitalize(newKey);
    }
});

keyForAttribute 這個(gè)方法接受 前端 定義的屬性名稱為參數(shù)，如當(dāng)下的firstName等，經(jīng)過(guò)轉(zhuǎn)換為后端相同的屬性名，如FirstName 。這樣來(lái)達(dá)到前后端通信的要求。

在上面我們可以看到，后端返回?cái)?shù)據(jù)中的 type為people，但是前端尋找的type 卻為person，這是因?yàn)?Ember Data 中的約定的關(guān)系，但是如果我們就想讓它尋找的type 為 people呢？那我們就需要用到 modelNameFromPayloadKey 這個(gè)方法：

//    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);
        return  capitalize(newKey);
    }
});

通過(guò)復(fù)寫這個(gè)方法就可以禁止 modelName 的單復(fù)數(shù)轉(zhuǎn)換了。
目前我們是在多帶帶的 model 下執(zhí)行的這個(gè) serializer 的幾個(gè)方法，如果需要在全局則需要將 serializer.js文件寫在 application 下¹。
相應(yīng)的，還會(huì)有payloadKeyFromModelName

## IDs
在 JSONAPI 中 每個(gè)條目都應(yīng)該使用 id 中的值來(lái)作為為一標(biāo)識(shí)，前后端都應(yīng)如此，如果后端沒(méi)有將 id 作為唯一標(biāo)識(shí)，那么就可以使用 primaryKey 這個(gè)屬性來(lái)定義一個(gè)唯一標(biāo)識(shí)：
這是前端定義的:

//    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);
        return capitalize(newKey);
    }
});

而后端傳來(lái)的數(shù)據(jù)即可變更為：

//    后端數(shù)據(jù)
{
    "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("2011-11-11 11:11:11").getTime()
        }
    }]
};

在日常工作中的難題之一就是命名，而往往后端的命名和前端的不太一致，如果我們做了大量的展示工作，再更換名稱那就有點(diǎn)比較麻煩，這時(shí)候我們可以使用 attrs屬性來(lái)達(dá)到我們的目的：
后端傳輸?shù)臄?shù)據(jù)中有一:

    //    ...
    ThePersonSelfHeight:176
    // ...

前端認(rèn)為這個(gè)名字過(guò)于復(fù)雜所以想alias：

//    people/serilizer.js
import DS from  "ember-data";
 
export  default  DS.JSONAPISerializer.extend({
    primaryKey: "pKey",
    attrs: {
        height: "ThePersonSelfHeight"
    },
    // ...
});

同時(shí)也需要在model.js 文件進(jìn)行相應(yīng)的修改：

//    people/model.js
// ...
    height:  DS.attr("number")
// ...

即可在頁(yè)面中使用.height展示ThePersonSelfHeight 屬性的值。

在工作中，后端傳回來(lái)的數(shù)據(jù)往往會(huì)有些許嵌套或者是后端人員有自己的思考方式導(dǎo)致數(shù)據(jù)的結(jié)構(gòu)和我們?cè)O(shè)想的有些許不同。這個(gè)時(shí)候我們可以通過(guò) serialize() 以及 normalizeResponse() 這兩個(gè)方法來(lái)實(shí)現(xiàn)我們的需求。
比如后端傳給我們的數(shù)據(jù)有:

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

而我們?cè)跀?shù)據(jù)顯示中希望能直接展示的depth，而不想從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")
});

我們可以通過(guò) serializer.js 中的 normalizeResponse()方法來(lái)實(shí)現(xiàn)我們的需求:

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

之后在 route.js 中我們請(qǐng)求數(shù)據(jù):

//    route.js
// ...
model() {
    return this.get("store").queryRecord("phone",{})
}

這樣頁(yè)面中我們就可以直接獲取 depth的值了:

    {{model.brand}}
    {{model.capacity}}
    {{model.depth}}
    {{model.display}}

除了 normalizeResponse()方法，還有其他的幾個(gè)方法，如:

//    phone/serializer.js
// ...
normalize(typeClass, hash) {
    hash.attributes.depth = hash.attributes.size.depth;
    delete hash.attributes.size;
    return  this._super.apply(this, arguments);
}

也可以起到相同的作用。這個(gè)方法可以在application中定義特定的 typeClass來(lái)針對(duì)調(diào)用。

在本文中我們獲取數(shù)據(jù)使用了 queryRecord()，所以我們還可以使用:

//    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);
},

相同的也可以聯(lián)想，當(dāng)我們獲取數(shù)據(jù)為:

// route.js
    mode() {
        return this.get("store").findAll("phone");
    }

這種情況的時(shí)候，可以使用:

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

依然可以達(dá)到我們的目的。Emberjs 還提供其他的 normalize hook:

normalizeFindBelongsToResponse()

normalizeFindHasManyResponse()

normalizeFindManyResponse()

normalizeFindRecordResponse()

normalizeQueryResponse()

等其他修改創(chuàng)建的請(qǐng)求。

這個(gè) hook 的使用需要從 創(chuàng)建一個(gè) record 說(shuō)起:

//    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"
});

在創(chuàng)建了 record 之后，可以在 EmberInspector 中的 Data 中查看到相應(yīng)的 data。同時(shí)在 serializer.js中添加 normalizeCreateRecordResponse():

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

這時(shí)在瀏覽器看到這個(gè) hook 并沒(méi)有執(zhí)行。這個(gè)hook 執(zhí)行的時(shí)機(jī)時(shí)在 保存 record 的時(shí)候:

//    article/route.js or controller.js
// ...
articles.save()

刷新后即可看到 normalizeCreateRecordResponse() 此鉤子已經(jīng)被執(zhí)行。
同理，其他的更新/刪除相似:

normalizeDeleteRecordResponse

normalizeSaveResponse

normalizeUpdateRecordResponse

至此 DS.JSONAPISerialize 的相關(guān)屬性與method 已解釋完成。

Written By FrankWang.