使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同步Import,同步调用外部js的方法
Jul 08 Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 Javascript
如何将php数组或者对象传递给javascript
Mar 20 Javascript
jQuery实现Twitter的自动文字补齐特效
Nov 28 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
Mar 10 Javascript
Node.js使用gm拼装sprite图片
Jul 04 Javascript
微信小程序模版渲染详解
Jan 26 Javascript
vue服务端渲染添加缓存的方法
Sep 18 Javascript
vue-cli的工程模板与构建工具详解
Sep 27 Javascript
JS数组splice操作实例分析
Oct 12 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与ASP
2006/10/09 PHP
利用php+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
javascript之dhDataGrid Ver2.0.0代码
2007/07/01 Javascript
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
jquery动态加载js三种方法实例
2013/08/03 Javascript
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
angularjs中的单元测试实例
2014/12/06 Javascript
jQuery回调函数的定义及用法实例
2014/12/23 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
2018/10/19 Javascript
React+TypeScript+webpack4多入口配置详解
2019/08/08 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
python实现根据月份和日期得到星座的方法
2015/03/27 Python
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
python监控文件并且发送告警邮件
2018/06/21 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
程序设计HTML5 Canvas API
2013/04/08 HTML / CSS
Internet体系结构
2014/12/21 面试题
一套软件测试笔试题
2014/07/25 面试题
仓管员岗位职责范文
2013/11/08 职场文书
基督教婚礼主持词
2014/03/14 职场文书
管理提升方案
2014/06/04 职场文书
关于保护环境的标语
2014/06/09 职场文书
法定代表人资格证明书
2014/09/11 职场文书
大学新生军训自我鉴定范文
2014/09/13 职场文书
谢师宴答谢词
2015/01/05 职场文书
财务工作个人总结
2015/02/27 职场文书
《纸船和风筝》教学反思
2016/02/18 职场文书