使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 相关文章推荐
父子窗体间传递JSON格式的数据的代码
Dec 25 Javascript
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
jquery星级插件、支持页面中多次使用
Mar 25 Javascript
js字符串转换成xml对象并使用技巧解读
Apr 18 Javascript
js写的方法实现上传图片之后查看大图
Mar 05 Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 Javascript
详解利用jsx写vue组件的方法示例
Jul 17 Javascript
pm2 部署 node的三种方法示例
Oct 20 Javascript
如何选择适合你的JavaScript框架
Nov 20 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
Mar 20 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 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
example1.php
2006/10/09 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
解析二进制流接口应用实例 pack、unpack、ord 函数使用方法
2013/06/18 PHP
如何使用php判断所处服务器操作系统的类型
2013/06/20 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
PHP实现浏览器格式化显示XML的方法示例
2019/01/22 PHP
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
类似天猫商品详情随浏览器移动的示例代码
2014/02/27 Javascript
jQuery 重复加载错误以及修复方法
2014/12/16 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
2016/05/17 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
JavaScript中获取时间的函数集
2016/08/16 Javascript
微信小程序 支付功能实现PHP实例详解
2017/05/12 Javascript
JS实现的判断方法、变量是否存在功能示例
2020/03/28 Javascript
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
python实现计算倒数的方法
2015/07/11 Python
python中list列表的高级函数
2016/05/17 Python
pandas pivot_table() 按日期分多列数据的方法
2018/11/16 Python
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
HTML5 中新的全局属性(整理)
2013/07/31 HTML / CSS
尼克松手表官网:Nixon手表
2019/03/17 全球购物
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
厂办主管岗位职责范本
2014/02/28 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
医疗专业毕业生求职信
2014/08/28 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
采购员岗位职责
2015/02/03 职场文书
新员工试用期自我评价
2015/03/10 职场文书
银行稽核岗位职责
2015/04/13 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
python tkinter实现定时关机
2021/04/21 Python
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js