使Ext的Template可以解析二层的json数据的方法

Ext的Template支持通过传入json数据的方式进行模板替换。
API中有这样一段示例:

代码如下:

var t = new Ext.Template( 
    '<div name="{id}">', 
        '<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>', 
    '</div>' 
); 
t.append('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});

稍作修改做个测试:

代码如下:

var t = new Ext.Template( 
    '<div name="{id}">', 
        '<span class="{cls}">{name} {value}</span>', 
    '</div>' 
); 
var dt=t.apply({id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'}); 
alert(dt);

运行上面的代码会弹出<div name="myid"><span class="myclass">foo bar</span></div>说明替换成功。

但如果又这样一个模板数据:

代码如下:

{id: 'myid', cls:{o:'myclass'}, name: 'foo', value: 'bar'}

我们想在替换时将模板中原cls部分替换为cls.o的值,也就是myclass,该怎么做呢?是不是想直接用{cls.o},你可以试下,绝对无效,没有替换。因为template匹配替换是直接对{}中冒号前的字符串与JSON变量进行匹配的。当然找不到cls.o这个串所以也就不能匹配。
好在Template支持对数据的解析处理。
我们可以自己定义一个解析函数即可。其实很简单:

代码如下:

var t = new Ext.Template( 
    '<div name="{id}">', 
        '<span class="{cls:this.parseJSON}">{name} {value}</span>', 
    '</div>' 
); 
t.parseJSON=function(data){return data.o}; 
var dt=t.apply({id: 'myid', cls: {o:'myclass'}, name: 'foo', value: 'bar'}); 
alert(dt)

我们定义了一个叫parseJSON的解析方法,在模板中访问顶层的cls然后对cls(是一个object)的值进行处理(直接访问它的o属性)即可。

时间: 2007-12-21

ext前台接收action传过来的json数据示例

ext前台接收action传过来的json数据 复制代码 代码如下: Ext.Ajax.request({ method:'POST',//请求方式 params : {dagl_code:dagl_code}, url:lcwPath+"/daxt/lcgl.shtml?method=getJgBycode",//请求的url地址 success: function(response, opts) { if(response.responseText!='{}'){ alert(re

springboot实现FastJson解析json数据的方法

最近在研究springboot实现FastJson解析json数据的方法,那么今天也算个学习笔记吧! 添加jar包: <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.15</version> </dependency> 两种方式启动加载类: 第一种继承WebMvcConfigur

jQuery使用ajax方法解析返回的json数据功能示例

本文实例讲述了jQuery使用ajax方法解析返回的json数据功能.分享给大家供大家参考,具体如下: 最近在用jQuery的ajax方法传递接收json数据时发现一个问题,那就是返回的data数据,有时候可以直接作为json数据使用,可有时候又不行.查了些资料,解释如下: $.ajax({ url: ajaxurl, type: "POST", success: function(data){ //假设返回的json数据里有status及info2个属性 //有时候可以直接ajaxo

JS实现兼容各浏览器解析XML文档数据的方法

本文实例讲述了JS实现兼容各浏览器解析XML文档数据的方法.分享给大家供大家参考.具体分析如下: 网站上很多用JS解析XML文档的资料或多或少都有点问题, 以下是自己总结的代码,用来解析XML文档,兼容各个浏览器. parseXMLDOM.js代码: /* * 纯JS解析XML文档(兼容各个浏览器) */ function parseXMLDOM(){ var _browserType = ""; var _xmlFile = ""; var _XmlDom = n

Android解析JSON数据的方法分析

本文实例讲述了Android解析JSON数据的方法.分享给大家供大家参考,具体如下: JSON作为一种"轻量"的数据结构传递数据,在JS中有广泛的应用 Google公司对JSON的解析提供了gson.jar这个包,它不依赖于其他任何JAR包:自从Android3.0中已经合入了该解析器的功能,但之前的版本是没有的. findViewById(R.id.parseBtn).setOnClickListener(new OnClickListener(){ @Override public

JS中Json数据的处理和解析JSON数据的方法详解

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C.C++.C#.Java.JavaScript.Perl.Python等).这些特性使JSON成为理想的数据交换语言. 易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率). JSON的规则很简单: 对象是一个无序的"'名称/值'对"集合.一个对象以&quo

js解析与序列化json数据(一)json.stringify()的基本用法

早期的JSON解析器基本上就是使用JavaScript的eval()函数.由于JSON是JavaScript语法的自己,因此eval()函数可以解析.解释并返回JavaScript的对象和数组. ECMAScript 5对解析JSON的行为进行了规范,定义了全局对象JSON. JSON对象有两个方法:stringify()和parse().在最简单的情况下,这两个方法分别用于把JavaScript对象序列化为JSON字符串和把JSON字符串解析为原生JavaScript.例如: 新建一个HTML

利用Golang解析json数据的方法示例

本文主要给大家介绍的是关于Golang解析json数据的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 使用 Golang 解析 json 数据,这种 json 格式是对象的数组,官方文档有一个示例: var jsonBlob = []byte(`[ {"Name": "Platypus", "Order": "Monotremata"}, {"Name": "Quoll

Spring Boot使用FastJson解析JSON数据的方法

个人使用比较习惯的json框架是fastjson,所以spring boot默认的json使用起来就很陌生了,所以很自然我就想我能不能使用fastjson进行json解析呢? 1.引入fastjson依赖库: <!--添加fastjson解析JSON数据--> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <versio