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


Posted in Javascript onDecember 22, 2007

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

Javascript 相关文章推荐
javascript 框架小结 个人工作经验
Jun 13 Javascript
isArray()函数(JavaScript中对象类型判断的几种方法)
Nov 26 Javascript
使用ExtJS技术实现的拖动树结点
Aug 05 Javascript
JavaScript中的单引号和双引号报错的解决方法
Sep 01 Javascript
Egret引擎开发指南之编译项目
Sep 03 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
May 18 Javascript
使用Ajax生成的Excel文件并下载的实例
Nov 21 Javascript
javascript流程控制语句集合
Sep 18 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
Feb 07 Javascript
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 #Javascript
javascript支持firefox,ie7页面布局拖拽效果代码
Dec 20 #Javascript
麦鸡的TAB切换功能结合了javascript和css
Dec 17 #Javascript
用javascript来实现动画导航效果的代码
Dec 16 #Javascript
不用ajax实现点击文字即可编辑的方法
Dec 16 #Javascript
JS是否可以跨文件同时控制多个iframe页面的应用技巧
Dec 16 #Javascript
Javascript常用运算符(Operators)-javascript基础教程
Dec 14 #Javascript
You might like
简单的PHP留言本实例代码
2010/05/09 PHP
编译php 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
PHP判断是否有Get参数的方法
2014/05/05 PHP
学习php设计模式 php实现单例模式(singleton)
2015/12/07 PHP
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
jQuery+ajax实现顶一下,踩一下效果
2010/07/17 Javascript
手把手教你自己写一个js表单验证框架的方法
2010/09/14 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
cookie的secure属性详解
2015/04/08 Javascript
整理AngularJS中的一些常用指令
2015/06/16 Javascript
jQuery实现带延迟效果的滑动菜单代码
2015/09/02 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
浅析jQuery操作select控件的取值和设值
2016/12/07 Javascript
微信小程序实战之自定义toast(6)
2017/04/18 Javascript
JS设计模式之策略模式概念与用法分析
2018/02/05 Javascript
bootstrap中的导航条实例代码详解
2019/05/20 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
vue与iframe之间的信息交互的实现
2020/04/08 Javascript
python监控文件或目录变化
2016/06/07 Python
Python Socket实现简单TCP Server/client功能示例
2017/08/05 Python
同时安装Python2 &amp; Python3 cmd下版本自由选择的方法
2017/12/09 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
Django的Modelforms用法简介
2019/07/27 Python
浅析python中while循环和for循环
2019/11/19 Python
python求最大公约数和最小公倍数的简单方法
2020/02/13 Python
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
《地震中的父与子》教学反思
2014/04/10 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
交通事故一次性赔偿协议书范本
2014/11/02 职场文书
义诊活动总结
2015/02/04 职场文书