使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 相关文章推荐
JS实现CheckBox复选框全选全不选功能
May 06 Javascript
JS+CSS实现精美的二级导航效果代码
Sep 17 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 Javascript
vue2.0 keep-alive最佳实践
Jul 06 Javascript
解决vue中对象属性改变视图不更新的问题
Feb 23 Javascript
Node.js使用cookie保持登录的方法
May 11 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 Javascript
node基于async/await对mysql进行封装
Jun 20 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 Javascript
webpack打包优化的几个方法总结
Feb 10 Javascript
Vue中点击active并第一个默认选中功能的实现
Feb 24 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
自动跳转中英文页面
2006/10/09 PHP
在服务端进行目录建立、删除,文件上传、删除的过程的php代码
2008/09/10 PHP
浅谈PHP中关于foreach使用引用变量的坑
2016/11/14 PHP
javascript英文日期(有时间)选择器
2007/05/02 Javascript
JS 遮照层实现代码
2010/03/31 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
js弹出窗口简单实现代码
2017/03/22 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
js 实现 list转换成tree的方法示例(数组到树)
2019/08/18 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
[01:05:56]Liquid vs VP Supermajor决赛 BO 第二场 6.10
2018/07/04 DOTA
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
Python中threading模块join函数用法实例分析
2015/06/04 Python
python从入门到精通(DAY 1)
2015/12/20 Python
使用Python神器对付12306变态验证码
2016/01/05 Python
python线程、进程和协程详解
2016/07/19 Python
Django 使用Ajax进行前后台交互的示例讲解
2018/05/28 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
如何利用Python分析出微信朋友男女统计图
2019/01/25 Python
Python实现爬取马云的微博功能示例
2019/02/16 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
Banana Republic英国官网:香蕉共和国,GAP集团旗下偏贵族风
2018/04/24 全球购物
接口中的方法可以是abstract的吗
2015/07/23 面试题
资深财务管理人员自我评价
2013/09/22 职场文书
大学生简历的个人自我评价
2013/12/04 职场文书
syb养殖创业计划书
2014/01/09 职场文书
学校领导班子群众路线整改措施
2014/09/16 职场文书
英文产品推荐信
2015/03/27 职场文书
护理心得体会范文
2016/01/22 职场文书
七年级生物教学反思
2016/02/20 职场文书