jQuery .tmpl() 用法示例介绍


Posted in Javascript onAugust 21, 2014

动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等。

这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在浏览器端拼数据就在服务器端拼数据。不过,从传输量方面来看,返回 HTML 不划算,而在 web 传输方面,现在更多的是使用 JSON 而不是 XML。

浏览器端根据 JSON 生成 HTML 有个很苦恼的地方就是,结构不复杂的时候还好,结构一复杂,就想死了,需要很小心很小心地写出几乎无法维护的 JavaScript 代码。

如同为解决 PHP 拼数据这方面的问题而有了 Smarty 这些模版,JavaScript 也可以利用模版来解决这些问题,比如基于 jQuery 的 jquery.tmpl,现在已经被接受为官方的模版插件了。详细的 API 在 jQuery 的 Templates 里,内置的 demo 也尽情地演示了各种用法。

就我自己的几次使用,感觉很不错,用更加直观方面的 HTML 写法而不是 JavaScript 拼凑 来写结构,然后用 JSON 变量来占位的方式来填充数据,代码看起来好多了。

Tmpl提供了几种tag:

${}:等同于{{=}},是输出变量,通过了html编码的。
{{html}}:输出变量html,但是没有html编码,适合输出html代码。
{{if }} {{else}}:提供了分支逻辑。
{{each}}:提供循环逻辑,$value访问迭代变量。

jquery tmpl的使用方法:

模板定义:

方法一:

<script id="movieTemplate" type="text/x-jquery-tmpl"> 
<li> 
<b>${Name}</b> (${ReleaseYear}) 
</li> 
</script>

方法二:

function makeTemplate(){ 
var markup='<li><b>${Name}</b> (${ReleaseYear})</li>‘; 
$.template(“movieTemplate”, markup); 
}

DATA:

var movies = [ 
{ Name: "The Red Violin", ReleaseYear: "1998" }, 
{ Name: "Eyes Wide Shut", ReleaseYear: "1999" }, 
{ Name: "The Inheritance", ReleaseYear: "1976" } 
];

Script:

$( "#movieTemplate" ).tmpl( movies ) 
.appendTo( "#movieList" );

实例1:

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script> 
</head> 
<body> 

<ul class="param-list"></ul> 

<script type="text/x-jquery-tmpl" id="new-param-tmpl"> 
<li rel="${num}"> 
<input type="text" name="key[${num}]" value="${key}" placeholder="key" /> = 
<input type="text" name="value[${num}]" value="${value}" placeholder="value" /> 
<button type="button" class="button small remove-param"><img src="http://mediacdn.disqus.com/1338845651/images/v3/icon/16/69.png" height="12" alt=""/></button> 
<button type="button" class="button small add-param"><span><img src="http://mediacdn.disqus.com/1338845651/images/v3/icon/16/13.png" height="12" alt=""/></button> 
</li> 
</script> 

<script> 
$(function(){ 
function addParam(key, value) { 
var param_list = $('.param-list'); 
var num = param_list.find('li').length; 

// build a template to clone the current row 
var built = $('#new-param-tmpl').tmpl({ 
num: num, 
key: key || '', 
value: value || '', 
}); 
if (key) param_list.prepend(built); 
else param_list.append(built); 

param_list.find('li:not(:last) .add-param').hide(); 
param_list.find('li:last .add-param').show(); 
param_list.find('li:not(:last) .remove-param').show(); 
param_list.find('li:last .remove-param').hide(); 
} 

// bind events 
$('.param-list .remove-param').live('click', function(){ 
$(this).parent().remove(); 
return false; 
}); 
$('.param-list .add-param').live('click', function(){ 
addParam(); 
return false; 
}); 

addParam(); 
})
</script> 
</body> 
</html>

实例2

<ul id="movieList"></ul> 

<script id="movieTemplate" type="text/x-jquery-tmpl"> 
<li><b>${Name}</b> (${ReleaseYear})</li> 
</script> 

<script type="text/javascript"> 
var movies = [ 
{ Name: "The Red Violin", ReleaseYear: "1998" }, 
{ Name: "Eyes Wide Shut", ReleaseYear: "1999" }, 
{ Name: "The Inheritance", ReleaseYear: "1976" } 
]; 

// Render the template with the movies data and insert 
// the rendered HTML under the "movieList" element 
$( "#movieTemplate" ).tmpl( movies ) 
.appendTo( "#movieList" ); 
</script>
Javascript 相关文章推荐
日期 时间js控件
May 07 Javascript
jQuery each()方法的使用方法
Mar 18 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 Javascript
js+html5实现canvas绘制简单矩形的方法
Jun 05 Javascript
纯javascript判断查询日期是否为有效日期
Aug 24 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
Vue组件之单向数据流的解决方法
Nov 10 Javascript
Angular7.2.7路由使用初体验
Mar 01 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
Aug 29 Javascript
vue中 数字相加为字串转化为数值的例子
Nov 07 Javascript
jQuery控制TR显示隐藏的三种常用方法
Aug 21 #Javascript
jQuery截取指定长度字符串代码
Aug 21 #Javascript
jquery实现的下拉和收缩效果示例
Aug 21 #Javascript
简单的jquery左侧导航栏和页面选中效果
Aug 21 #Javascript
使用jQuery设置disabled属性与移除disabled属性
Aug 21 #Javascript
JS使用for循环遍历Table的所有单元格内容
Aug 21 #Javascript
Javascript 绘制 sin 曲线过程附图
Aug 21 #Javascript
You might like
超级简单的发送邮件程序
2006/10/09 PHP
php上传、管理照片示例
2006/10/09 PHP
在Mac OS下搭建LNMP开发环境的步骤详解
2017/03/10 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
php如何利用pecl安装mongodb扩展详解
2019/01/09 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
Node.js爬取豆瓣数据实例分析
2018/03/05 Javascript
axios取消请求的实践记录分享
2018/09/26 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
[01:05:30]VP vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python解析xml中dom元素的方法
2015/03/12 Python
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
Python中join函数简单代码示例
2018/01/09 Python
Python使用Matplotlib模块时坐标轴标题中文及各种特殊符号显示方法
2018/05/04 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
Linux 修改Python命令的方法示例
2018/12/03 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
如何基于Python实现数字类型转换
2020/02/07 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
基于python获取本地时间并转换时间戳和日期格式
2020/10/27 Python
深入解析HTML5 Canvas控制图形矩阵变换的方法
2016/03/24 HTML / CSS
canvas与html5实现视频截图功能示例
2016/12/15 HTML / CSS
HelloFresh澳大利亚:订购你的美味食品盒、健康餐食
2018/03/28 全球购物
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
幼儿园教师培训方案
2014/02/04 职场文书
临床医学专业求职信
2014/08/08 职场文书
合作协议书范文
2014/08/20 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
党的群众路线教育实践活动查摆剖析材料
2014/10/10 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技