当前位置:K88软件开发文章中心编程语言JavaScriptEmber.js → 文章内容

Ember 自定义序列号器

减小字体 增大字体 作者:佚名  来源:网上搜集  发布时间:2019-1-15 15:27:11

由 ubuntu的疯狂 创建, 最后一次修改 2017-01-06 在Ember应用中,序列化器会格式化与后台交互的数据,包括发送和接收的数据。默认情况下会使用JSON API序列化数据。如果你的后端使用不同的格式,Ember Data允许你自定义序列化器或者定义一个完全不同的序列化器。Ember Data内置了三个序列化器。JSONAPISerializer是默认的序列化器,用与处理后端的JSON API。JSONSerializer是一个简单的序列化器,用与处理单个JSON对象或者是处理记录数组。RESTSerializer是一个复杂的序列化器,支持侧面加载,在Ember Data2.0之前是默认的序列化器。JSONAPISerializer规范当你向服务器请求数据时,JSONSerializer会把服务器返回的数据当做是符合下列规范的JSON数据。注意:特别是项目使用的是自定义适配器的时候,后台返回的数据格式必须符合JSOP API规范,否则无法实现数据的CRUD操作,Ember就无法解析数据,关于自定义适配器这点的知识请看上一篇Ember.js 入门指南之四十四自定义适配器,在文章中有详细的介绍自定义适配器和自定义序列化器是息息相关的。1,JSON API文档JSONSerializer期待后台返回的是一个符合JSON API规范和约定的JSON文档。比如下面的JSON数据,这些数据的格式是这样的:type指定model的名称属性名称使用中划线分隔比如请求/people/123,响应的数据如下:{ "data": { "type": "people", "id": "123", "attributes": { "first-name": "Jeff", "last-name": "Atwood" } }}如果响应的数据有多条,那么data将是以数组形式返回。{ "data": [ { "type": "people", "id": "123", "attributes": { "first-name": "Jeff", "last-name": "Atwood" } },{ "type": "people", "id": "124", "attributes": { "first-name": "chen", "last-name": "ubuntuvim" } } ]}2,拷贝数据数据有时候并不是请求的主体,如果数据有链接。链接的关系会放在included下面。{ "data": { "type": "articles", "id": "1", "attributes": { "title": "JSON API paints my bikeshed!" }, "links": { "self": "http://example.com/articles/1" }, "relationships": { "comments": { "data": [ { "type": "comments", "id": "5" }, { "type": "comments", "id": "12" } ] } } }], "included": [{ "type": "comments", "id": "5", "attributes": { "body": "First!" }, "links": { "self": "http://example.com/comments/5" } }, { "type": "comments", "id": "12", "attributes": { "body": "I like XML better" }, "links": { "self": "http://example.com/comments/12" } }]}从JSON数据看出,id为5的comment链接是"self": http://example.com/comments/5。id为12的comment链接是"self": http://example.com/comments/12。并且这些链接是单独放置included内。3,自定义序列化器Ember Data默认的序列化器是JSONAPISerializer,但是你也可以自定义序列化器覆盖默认的序列化器。要自定义序列化器首先要定义一个名为application序列化器作为入口。直接使用命令生成:ember g serializer application// app/serializers/application.jsimport DS from 'ember-data';export default DS.JSONSerializer.extend({});甚至你还可以针对某个模型定义序列化器。比如下面的代码为post定义了一个专门的序列化器,在前一篇自定义适配器中介绍过如何为一个模型自定义适配器,这个两个是相关的。// app/serializers/post.jsimport DS from ‘ember-data’;export default DS.JSONSerializer.extend({});如果你想改变发送到后端的JSON数据格式,你只需重写serialize回调,在回调中设置数据格式。比如前端发送的数据格式是如下结构, { "data": { "attributes": { "id": "1", "name": "My Product", "amount": 100, "currency": "SEK" }, "type": "product" }}但是服务器接受的数据结构是下面这种结构:{ "data": { "attributes": { "id": "1", "name": "My Product", "cost": { "amount": 100, "currency": "SEK" } }, "type": "product" }}此时你可以重写serialize回调。// app/serializers/application.jsimport DS from 'ember-data';export default DS.JSONSerializer.extend({ serialize: function(snapshot, options) { var json = this._super(...arguments); // ?? json.data.attributes.cost = { amount: json.data.attributes.amount, currency: json.data.attributes.currency }; delete json.data.attributes.amount; delete json.data.attributes.currency; return json; }});那么如果是反过来呢。如果后端返回的数据格式为:{ "data": { "attributes": { "id": "1", "name": "My Product", "cost": { "amount": 100, "currency": "SEK" } }, "type": "product" }}但是前端需要的格式是:{ "data": { "attributes": { "id": "1", "name": "My Product", "amount": 100, "currency": "SEK" }, "type": "product" }}此时你可以重写回调方法normalizeResponse或normalize,在方法里设置数据格式:// app/serializers/application.jsimport DS from 'ember-data';export default DS.JSONSerializer.extend({ normalizeResponse: function(store, primaryModelClass, payload, id, requestType) { payload.data.attributes.amount = payload.data.attributes.cost.amount; payload.data.attributes.currency = payload.data.attributes.cost.currency; delete payload.data.attributes.cost; return this._super(...arguments); }});4,数

[1] [2] [3]  下一页


Ember 自定义序列号器