一 , 简单介绍
它是一个基于jQuery开发的javascript模板引擎。它主要的作用如下: 1. 通过JavaScript获取JSON形式的数据; 2. 获取一个HTML模板,与数据相结合,生成页面HTML。 二 , 快速上手 先来看一个简单的例子: <script type="text/javascript" src="jquery-1.2.6.pack.js"></script> <script type="text/javascript" src="jquery-jtemplates.js"></script><script type="text/javascript"> $(document).ready(function() { //初始化数据 var data = { name: '用户列表', list_id: '编号89757', table: [ {id: 1, name: 'Rain', age: 22, mail: }, {id: 2, name: "皮特', age: 24, mail: }, {id: 3, name: "卡卡', age: 20, mail: }, {id: 4, name: "戏戏', age: 26, mail: }, {id: 5, name: "一揪', age: 25, mail: } ] }; // 附上模板 $("#result1").setTemplateElement("template"); // 给模板加载数据 $("#result1").processTemplate(data); }); </script><!-- 模板内容 --> <textarea id="template" style="display:none"> <strong>{$T.name} : {$T.list_id}</strong> <table> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> <th>邮箱</th> </tr> {#foreach $T.table as record} <tr> <td>{$T.record.id}</td> <td>{$T.record.name}</td> <td>{$T.record.age}</td> <td>{$T.record.mail}</td> </tr> {#/for} </table> </textarea><!-- 输出元素 --> <div id="result1" ></div>上面代码中,先导入了jQuery.js,然后导入jtemplates.js。 接下来新建了一个data数据的json对象。 var data = { ...... };然后在HTMl页面上增加一个 输出元素 和 一个模板元素: 最后在JS给输出元素 附加模板 和 数据。 这样,运行代码后,出现如下图所示界面。 三 , 加载模板 这次把模板放到一个单独的页面中,而不是直接写在页面里。 新建一个template.html,放入以下代码: <strong>{$T.name} : {$T.list_id}</strong> <table> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> <th>邮箱</th> </tr> {#foreach $T.table as record} <tr> <td>{$T.record.id}</td> <td>{$T.record.name}</td> <td>{$T.record.age}</td> <td>{$T.record.mail}</td> </tr> {#/for} </table>然后新建一个json文件,名称为cs.json,代码如下: { name: "用户列表", list_id: "编号89757", table: [ {id: 1, name: 'Rain', age: 22, mail: }, {id: 2, name: "皮特', age: 24, mail: }, {id: 3, name: "卡卡', age: 20, mail: }, {id: 4, name: "戏戏', age: 26, mail: }, {id: 5, name: "一揪', age: 25, mail: } ] }在jQuery中,可以通过$.ajax()方法来加载 json文件,代码如下: <script type="text/javascript"> $(function(){ $.ajax({ type: "post", dataType: "json", url: "cs.json", success: function(data){ ..... } }); }); </script>在success回调函数里,首先需要设置模板,然后需要添加数据。如下代码所示: success: function(data){ // 设置模板 $("#result1").setTemplateURL("template.html?date="+(+new Date()), null, {filter_data: true}); // 加载数据 $("#result1").processTemplate(data); } }完整代码如下所示: $(function(){ $.ajax({ type: "post", dataType: "json", url: "cs.json", success: function(data){ $("#result1").setTemplateURL("template.html?date="+(+new Date()), null, {filter_data: true}); $("#result1").processTemplate(data); } }); });运行代码后,也可以得到上图的界面。
四 ,小结 关于 new Date().getTime()的简写方式:可以参考这篇文章: CssRain提供的几个例子,按照官方写的: jtemplates官方首页 : 官方的几个例子: 1. Simple template (see source as description) 2. Example 1 + multiple elements + parameters 3. Example 1 (Valid XHTML 1.1 !) 4. Multitemplate (Valid XHTML 1.1) |
[转]jquery的一个模板引擎-zt
发布日期:2022-03-15 04:11:24
浏览次数:57
分类:技术文章
本文共 2863 字,大约阅读时间需要 9 分钟。
jQuery-jTemplate.js下载:
转载于:https://www.cnblogs.com/lxinxuan/archive/2009/03/10/1407756.html
转载地址:https://blog.csdn.net/weixin_30536513/article/details/99846852 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
做的很好,不错不错
[***.243.131.199]2024年04月21日 07时00分28秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
reactos操作系统实现(93)
2019-04-28
使用Python快速实现显示器关闭和锁住桌面
2019-04-28
reactos操作系统实现(94)
2019-04-28
reactos操作系统实现(95)
2019-04-28
reactos操作系统实现(96)
2019-04-28
reactos操作系统实现(97)
2019-04-28
reactos操作系统实现(98)
2019-04-28
reactos操作系统实现(99)
2019-04-28
miniport, port driver,disk.sys 之间的关系(转)
2019-04-28
Python标准库:内置函数tuple([iterable])
2019-04-28
Python标准库:内置函数type(object)
2019-04-28
Python标准库:内置函数vars([object])
2019-04-28
人人都懂的编程课(Python)
2019-04-28
reactos操作系统实现(100)
2019-04-28
reactos操作系统实现(101)
2019-04-28
Android培训班(75)Dalvik虚拟机的GetStaticMethodID函数
2019-04-28
新手也可以学会TensorFlow
2019-04-28
游戏制作之路(32)创建自定义的界面样式管理
2019-04-28
从小说里学会长大
2019-04-28