Ext的Template支持通过传入json数据的方式进行模板替换。
API中有这样一段示例:

var t = new Ext.Template(  
    '
',          '{name:trim} {value:ellipsis(10)}',      '
'  );  t.append('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'}); 



稍作修改做个测试:

var t = new Ext.Template(  
    '
',          '{name} {value}',      '
'  );  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(  
    '
',          '{name} {value}',      '
'  );  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属性)即可。

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

  1. ios – OpenCV构建问题,找不到ext/atomicity.h

    我得到编译器错误抱怨在构建包含OpenCV的项目时.环境是针对iOS的Xcode4.5.它为模拟器编译良好,但在为设备构建时失败.这是错误文本:我正在使用opencv2.framework,使用指令here构建cmake.解决方法默认情况下,XCode4.5使用libc(支持C11的LLVMC标准库)生成要构建的新项目.但OpenCV期望针对GNUlibstd

  2. Android Studio 2.3更新:警告:使用不兼容的插件进行注释处理:android-apt.这可能会导致意外行为

    所以,我已经阅读了本网站上有关此问题的所有问题.我还与其中一位有类似问题的开发人员聊天,他能够解决这个问题.我没有在我的gradle脚本中编写apt或annotationProcessor.我的代码中没有任何地方写过android-apt这个词.我甚至继续检查了所有的库.这包含在我的项目中.这是一个非常大的问题,需要解决.我在下面附加修改后的build.gradle,请建议:解决方法较旧版本的Re

  3. 如何在Picasso库中实现Pinch Zoom?

    我在我目前的项目http://square.github.io/picasso/中使用Picasso库.一切都运行正常,但我无法弄清楚如何为从URL加载的所有图像实现PinchZoom.说实话,我甚至不知道在哪里放置onClickListener.我的应用程序有几个片段,每个片段都有2个选项卡,第一个选项卡有一个ListView,第二个选项卡有一些显示在GridView中的图片:Bmw.javaS

  4. AngularJS下$http服务Post方法传递json参数的实例

    下面小编就为大家分享一篇AngularJS下$http服务Post方法传递json参数的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  5. JSON 入门教程基础篇 json入门学习笔记

    刚开始接触json的时候感觉有点奇怪的命名,后来使用才发现这么简单而且用好用,扩展性很强,这里就为大家整理一下

  6. Java设计模式之模板方法模式Template Method Pattern详解

    在我们实际开发中,如果一个方法极其复杂时,如果我们将所有的逻辑写在一个方法中,那维护起来就很困难,要替换某些步骤时都要重新写,这样代码的扩展性就很差,当遇到这种情况就要考虑今天的主角——模板方法模式

  7. jQuery+ajax读取json数据并按照价格排序示例

    这篇文章主要介绍了jQuery+ajax读取json数据并按照价格排序,涉及jQuery基于ajax动态获取json文件数据并进行数据遍历与排序的相关操作技巧,需要的朋友可以参考下

  8. spring学习JdbcTemplate数据库事务管理

    这篇文章主要为大家介绍了spring学习JdbcTemplate数据库事务管理,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  9. Java接口返回json如何忽略特定属性

    这篇文章主要介绍了Java接口返回json如何忽略特定属性,通过SimplePropertyPreFilter方式(Json返回),这种写法,接口返回类型就要求是Json字符串类型,本文通过场景实例代码相结合给大家介绍的非常详细,需要的朋友可以参考下

  10. Javascript实用方法之json合并的场景分析

    这篇文章主要介绍了Javascript实用方法之json合并,jQuery 的“extend()”方法有两个原型:合并的方法,分别是浅合并和深度合并,本文通过代码给大家介绍的非常详细,需要的朋友可以参考下

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部