使Ext的Template可以解析二层的json数据的方法_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属性)即可。

时间: 2024-10-24 05:24:38

使Ext的Template可以解析二层的json数据的方法_json的相关文章

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

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

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

  本文实例讲述了JS实现兼容各浏览器解析XML文档数据的方法.分享给大家供大家参考.具体分析如下: 网站上很多用JS解析XML文档的资料或多或少都有点问题, 以下是自己总结的代码,用来解析XML文档,兼容各个浏览器. parseXMLDOM.js代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

通讯录-用Gson解析出来的json数据怎样在界面上显示出来

问题描述 用Gson解析出来的json数据怎样在界面上显示出来 想做一个类似于通信录的东西,现在能从服务器请求数据并解析出来,但是不清楚怎么把解析出来的数据显示在界面上,,每次请求返回来的联系人的数目可能会变化, 怎样考虑让他每次全部显示出来呢? 解决方案 Gson解析Json数据gson 解析json数据Gson解析Json数据 解决方案二: 转换成集合遍历 解决方案三: js中拼接html,用jquey的html()方法更新页面

不使用第三方包可以使用是么方法解析xml与json数据

问题描述 不使用第三方包可以使用是么方法解析xml与json数据 不使用第三方包可以使用是么方法解析xml与json数据! 不使用第三方包可以使用是么方法解析xml与json数据! 不使用第三方包可以使用是么方法解析xml与json数据! 解决方案 当初文件来查找解析.比较繁琐而已. 解决方案二: org.w3c.dom 就提供解析XML的接口.

Android解析JSON数据的方法分析_Android

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

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

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

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

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(

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.stringify()的基本用法_json

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