jQuery-jTemplate.js下载:http://jtemplates.tpython.com/

一 , 简单介绍

它是一个基于jQuery开发的javascript模板引擎。它主要的作用如下:

. 通过JavaScript获取JSON形式的数据;

. 获取一个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: , name: 'Rain', age: , mail: },
{id: , name: "皮特', age: 24, mail: },
{id: , name: "卡卡', age: 20, mail: },
{id: , name: "戏戏', age: 26, mail: },
{id: , 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: , name: 'Rain', age: , mail: },
{id: , name: "皮特', age: 24, mail: },
{id: , name: "卡卡', age: 20, mail: },
{id: , name: "戏戏', age: 26, mail: },
{id: , 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()的简写方式:可以参考这篇文章: http://www.cssrain.cn/article.asp?id=1116 CssRain提供的几个例子,按照官方写的: 点击下载此文件 jtemplates官方首页 : http://jtemplates.tpython.com/ 官方的几个例子:
. Simple template (see source as description)
example1.html . Example + multiple elements + parameters
example2.html . Example (Valid XHTML 1.1 !)
example3.html . Multitemplate (Valid XHTML 1.1)
example4.html

jquery的一个模板引擎-zt的更多相关文章

  1. 说说如何用js实现一个模板引擎

    本文同步更新在: https://github.com/whxaxes/blog/issues/4 ,在 github 看文章显示效果会更好一些. 前言 不知不觉就很长时间没造过什么轮子了,以前一直想 ...

  2. handlebars——另外一个模板引擎

    什么是handlebars? handlebars库是另外一个模板引擎,他继承mustache(胡子),感觉没有jade(珠宝)好听,他不允许在模板中写很多JavaScript的逻辑.这有助于保持模板 ...

  3. jquery.tmpl.js 模板引擎用法

    1.0 引入: <script src="/js/jquery.tmpl.min.js"></script> 2.0 模板: <script type ...

  4. 写一个迷你版Smarty模板引擎,对认识模板引擎原理非常好(附代码)

    前些时间在看创智博客韩顺平的Smarty模板引擎教程,再结合自己跟李炎恢第二季开发中CMS系统写的tpl模板引擎.今天就写一个迷你版的Smarty引擎,虽然说我并没有深入分析过Smarty的源码,但是 ...

  5. consolidate.js 一个Node.js 模板引擎的集合

    consolidate是一个模板引擎的结合体.包括了常用的jade和ejs.通过配置我们就可以使用多种模板引擎. consolidate.js安装 npm install consolidate co ...

  6. knockoutJS学习笔记02:jsRender模板引擎

    上一篇最后提到了模板,并尝试自己编写一个最简单版本:有些朋友可能用过 jqtmpl,这是一个基于jquery的模板引擎,不过它已经不再更新了,而且据说渲染速度比较慢.这里介绍另外一个模板引擎:jsRe ...

  7. jsRender模板引擎

    jsRender模板引擎 上一篇最后提到了模板,并尝试自己编写一个最简单版本:有些朋友可能用过 jqtmpl,这是一个基于jquery的模板引擎,不过它已经不再更新了,而且据说渲染速度比较慢.这里介绍 ...

  8. 模板引擎 引自 《PHP核心技术与最佳实践》

    随着web的发展,仅一门语言或者一种技术已经不能满足需求,分层架构显得越来越重要.在大型架构中,从来不会简单地应用php从头到尾实现一个完整的mvc架构.可能底层是c/java的支撑,负责密集运算和y ...

  9. iOS:使用模板引擎渲染HTML界面

    在实际开发中,UIWebView控件接受一个HTML内容,用于相应的界面,下面是该API的接口: - (void)loadHTMLString:(NSString *)string baseURL:( ...

随机推荐

  1. C++并发编程 互斥和同步

    C++并发编程 异步任务(async) 线程基本的互斥和同步工具类, 主要包括: std::mutex 类 std::recursive_mutex 类 std::timed_mutex 类 std: ...

  2. python 获取外网地址

    def get_ip(): try: url = "http://cn.bing.com/search?q=ip&go=%E6%8F%90%E4%BA%A4&qs=n& ...

  3. MySQL建表时列名同保留字重复问题解决办法

    建表时遇到遇到属性名同MySQL的保留字相同导致不能建表的问题,如下SQL语句: CREATE TABLE TBL_ACCOUNT_FROZEN_RECORD ( ID BIGINT NOT NULL ...

  4. 如何识别字符串是否是UTF-8编码的

    我们先要弄明白原始字符串里的字符用的是何种编码方式,运行如下 string tmp = "你好world"; for(int i=0;i<tmp.size();++i) { ...

  5. mysql数据库使用sql命令窗口查询的数据,改成sql语句导入到mysql数据库中

    1.查询语句为select * from t_table;导出的数据格式如下: 2.将数据文本备份,然后使用NOTEPAD++打开,然后只拷贝数据到新建txt中,然后进行如下替换: 1)将“ | ”分 ...

  6. 哪些window你不知道的却实用的小技巧----window小技巧

    前言 一直想要整理一篇有关于window比较全的使用小技巧,却又不知道从哪里开始写起.而让我准备动手写这边随笔的动力,还是在加入虫部落<一个绿色环保,充满朝气的好地方>,从大家的分享中,我 ...

  7. uva 1639 Candy (对数处理精度)

    https://vjudge.net/problem/UVA-1639 有两个盒子各有n(n≤2*10 5 )个糖,每天随机选一个(概率分别为p,1-p),然后吃一颗糖. 直到有一天,打开盒子一看,没 ...

  8. HTML 5 Web 存储:localStorage和sessionStorage

    本文内容摘自http://www.w3school.com.cn/ 在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessi ...

  9. 【洛谷 P2764】 最小路径覆盖问题(最大流)

    题目链接 首先有\(n\)条路径,每条路径就是一个点,然后尽量合并,答案就是点数-合并数. 套路拆点,源连入,出连汇,原有的边入出连. 最大流就是最大合并数,第一问解决. 然后怎么输出方案? 我是找到 ...

  10. python初步学习-python文件操作

    文件 文件,在python中,他是一种类型的对象,类似前面已经学过的其他数据类型,包括文本的.图片的.音频的.视频的等等,还有不少没见过的扩展名的.事实上,在linux操作系统中,所有的东西都被保存到 ...