文档章节

EmberJS中EmberData如何解析非默认格式的JSON数据

puras
 puras
发布于 2014/06/27 10:45
字数 678
阅读 198
收藏 0

行业解决方案、产品招募中!想赚钱就来传!>>>

背景与问题

最近在使用EmberJS做为前端MVC框架来编写前端应用,但遇到了一个问题,EmberData要求的JSON格式默认为下面这样:

{
    "user":[
        {
            "name": "puras1",
            ......
        },
        {
            "name": "puras2",
            ......
        },
        {
            "name": "puras3",
            ......
        }
    ]
}

而我们后端返回的格式却与之不同,是下面这样的格式:

{    
    "errcode": 0,
    "message": "success",
    "ret": 0,
    "data": {
        "user":[
            {
                "name": "puras1",
                ......
            },
            {
                "name": "puras2",
                ......
            },
            {
                "name": "puras3",
                ......
            }
        ]
    }
}

通过DS.RESTAdapter来读取数据的话,是无法正常工作的。
想了三种办法来解决这个问题。

解决办法

主要思路是重写RESTAdapter中的ajax方法,Ajax方法如下:

ajax: function(url, type, hash) {
    var adapter = this;

    return new Ember.RSVP.Promise(function(resolve, reject) {
      hash = adapter.ajaxOptions(url, type, hash);

      hash.success = function(json) {
        Ember.run(null, resolve, json);
      };

      hash.error = function(jqXHR, textStatus, errorThrown) {
        Ember.run(null, reject, adapter.ajaxError(jqXHR));
      };

      Ember.$.ajax(hash);
    }, "DS: RestAdapter#ajax " + type + " to " + url);
  }

方法中,如果请求成功,则会调用hash.success方法,直接把JSON串传到了Ember.run方法中。由于我们后端返回的格式不同,我们想传JSON中指定的内容到Ember.run方法中。如下面解决方法中,根据传回的JSON串结构,使用json.data来替代原来的json。

方法一:继承RESTAdapter实现自己的Adapter

自定义一个Adapter,继承RESTAdapter,重写Ajax方法:

App.MKRESTAdapter = DS.RESTAdapter.extend({
    ajax: function(url, type, hash) {
        var adapter = this;
        return new Ember.RSVP.Promise(function(resolve, reject) {
            hash = adapter.ajaxOptions(url, type, hash);

            hash.success = function(json) {
                Ember.run(null, resolve, json.data);
            };
            hash.error = function(jqXHR, textStatus, errorThrown) {
                Ember.run(null, reject, adapter.ajaxError(jqXHR));
            };

            Ember.$.ajax(hash);
        }, "DS: RESTAdapter#ajax " + type + " to " + url);
    }
});

在使用的时候,用MKRESTAdapter来替代RESTAdapter:

//App.ApplicationAdapter = DS.RESTAdapter.extend();
// 修改成
App.ApplicationAdapter = App.MKRESTAdapter.extend();

缺点:需要多加载一个自定义的类。

方法二:通过reopen重写RESTAdapter的Ajax方法

不重新自定义Adapter,直接通过reopen来重写RESTAdapter:

DS.RESTAdapter.reopen({
    ajax: function(url, type, hash) {
        var adapter = this;
        return new Ember.RSVP.Promise(function(resolve, reject) {
            hash = adapter.ajaxOptions(url, type, hash);

            hash.success = function(json) {
                Ember.run(null, resolve, json.data);
            };
            hash.error = function(jqXHR, textStatus, errorThrown) {
                Ember.run(null, reject, adapter.ajaxError(jqXHR));
            };

            Ember.$.ajax(hash);
        }, "DS: RESTAdapter#ajax " + type + " to " + url);
    }
});

使用方式不变。

缺点:改变了RESTAdapter默认的处理方式,而且是全局模式的,在其他地方如果使用RESTAdapter可能会受到影响。

方法三:通过reopen重写ApplicationAdapter的Ajax方法

从使用角度上来讲,App.ApplicationAdapter也是继承了RESTAdapter,只不过是EmberJS有个默认的实现而已,我们可以使用方法一中的方式,来重写ajax方法:

App.ApplicationAdapter.reopen({    
    ajax: function(url, type, hash) {
        var adapter = this;
        return new Ember.RSVP.Promise(function(resolve, reject) {
            hash = adapter.ajaxOptions(url, type, hash);

            hash.success = function(json) {
                Ember.run(null, resolve, json.data);
            };
            hash.error = function(jqXHR, textStatus, errorThrown) {
                Ember.run(null, reject, adapter.ajaxError(jqXHR));
            };

            Ember.$.ajax(hash);
        }, "DS: RESTAdapter#ajax " + type + " to " + url);
    }
});

最后选择的是方法三,又实现了需求,又没有影响RESTAdapter默认的形为。

以上!

puras
粉丝 47
博文 4
码字总数 1240
作品 0
沈阳
后端工程师
私信 提问
加载中
请先登录后再评论。
用vertx实现高吞吐量的站点计数器

工具:vertx,redis,mongodb,log4j 源代码地址:https://github.com/jianglibo/visitrank 先看架构图: 如果你不熟悉vertx,请先google一下。我这里将vertx当作一个容器,上面所有的圆圈要...

jianglibo
2014/04/03
4.1K
3
CDH5: 使用parcels配置lzo

一、Parcel 部署步骤 1 下载: 首先需要下载 Parcel。下载完成后,Parcel 将驻留在 Cloudera Manager 主机的本地目录中。 2 分配: Parcel 下载后,将分配到群集中的所有主机上并解压缩。 3 激...

cloud-coder
2014/07/01
6.8K
1
beego API开发以及自动化文档

beego API开发以及自动化文档 beego1.3版本已经在上个星期发布了,但是还是有很多人不了解如何来进行开发,也是在一步一步的测试中开发,期间QQ群里面很多人都问我如何开发,我的业余时间实在...

astaxie
2014/06/25
2.7W
22
Nutch学习笔记4-Nutch 1.7 的 索引篇 ElasticSearch

上一篇讲解了爬取和分析的流程,很重要的收获就是: 解析过程中,会根据页面的ContentType获得一系列的注册解析器, 依次调用每个解析器,当其中一个解析成功后就返回,否则继续执行下一个解...

强子哥哥
2014/06/26
712
0
树莓派(Raspberry Pi):完美的家用服务器

自从树莓派发布后,所有在互联网上的网站为此激动人心的设备提供了很多有趣和具有挑战性的使用方法。虽然这些想法都很棒,但树莓派( RPi )最明显却又是最不吸引人的用处是:创建你的完美家用...

异次元
2013/11/09
6.5K
8

没有更多内容

加载失败,请刷新页面

加载更多

开源FPGA单板iCESugar

随着产业的发展,近年来FPGA越来越得到市场的重视,5G、矿机、人工智能、图像识别、risc-v、通信等众多领域均可见到FPGA的身影,目前比较知名的FPGA厂商有xilinx、altera、lattice等,其中x...

whoisliang
38分钟前
6
0
合并记录帮助文档

合并记录步骤用于将两个不同来源的数据合并,这两个来源的数据分别为旧数据和新数据;该步骤将旧数据和新数据按照指定的关键字匹配、比较、合并,并显示差异信息。接下来就详细介绍一下该步骤...

osc_slnrw1du
38分钟前
19
0
Spark之RDD转换算子(transformation)大全

前面已经给大家讲过RDD原理,今天就给大家说说RDD的转换算子有哪些,以便大家理解。 对于转换操作,RDD的所有转换都不会直接计算结果,仅记录作用于RDD上的操作,当遇到动作算子(Action)时...

osc_3nr2bq5w
39分钟前
11
0
自定义常量数据帮助文档

自定义常量数据步骤主要用于增加自定义字段和行集数据到流中,可增加多个字段并为每个字段赋予行集的值。步骤配置信息如图1所示。 图1 自定义常量数据步骤配置信息 下文详细解释各控件的含义...

osc_r9wwwi0j
40分钟前
10
0
Linux安装配置ftp(Ceonts 7)

1、安装vsftpd yum -y install vsftpd (我这里已经安装好了,只要不报错即安装成功) 安装完成后可以在/etc/vsftpd目录下看到vsftpd.conf 文件,这是vsftp的配置文件。 2、 添加一个ftp用户...

osc_tko37abm
41分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部