使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属性）即可。

赞 (0)

相关推荐

  • 使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(

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

    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

  • 实例详解esp8266解析json数据的方法

    实例详解esp8266解析json数据的方法

    #include <ArduinoJson.h> void setup() { Serial.begin(115200); Serial.println("这里用于测试json数据的解析"); // DynamicJsonDocument对象 定义时候我们需要定义一个大小信息+复制大小 const size_t capacity = JSON_OBJECT_SIZE(2) + 30; DynamicJsonDocument doc(capacity); // 要解析的jso

  • Nodejs访问网络并解析返回的json的实现方法

    Nodejs访问网络并解析返回的json的实现方法

    目录 一:解析本地Json文件 二:访问网络 一:解析本地Json文件 sample.json { "api": "mtop.common.getTimestamp", "v": "*", "ret": [ "SUCCESS::接口调用成功" ], "data": { "t": "1647006040138" } } jsonP

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

    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

随机推荐