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 相关文章推荐
精通Javascript系列之Javascript基础篇
Jun 07 Javascript
js图片延迟技术一般的思路与示例
Mar 20 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
Sep 05 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
Dec 08 Javascript
JavaScript实现网页头部进度条刷新
Apr 16 Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
vue.extend与vue.component的区别和联系
Sep 19 Javascript
jQuery实现验证用户登录
Dec 10 jQuery
解决vue-photo-preview 异步图片放大失效的问题
Jul 29 Javascript
微信小程序实现日历签到
Sep 21 Javascript
Ajax常用封装库——Axios的使用
May 08 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
php 验证码实例代码
2010/06/01 PHP
PHP 时间日期操作实战
2011/08/26 PHP
php压缩HTML函数轻松实现压缩html/js/Css及注意事项
2013/01/27 PHP
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
能说明你的Javascript技术很烂的五个原因分析
2011/10/28 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
页面刷新时记住滚动条的位置jquery代码
2014/06/17 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
javascript下拉列表菜单的实现方法
2015/11/18 Javascript
详解JavaScript节流函数中的Throttle
2016/07/16 Javascript
微信小程序 页面传参实例详解
2016/11/16 Javascript
深入理解jquery中的each用法
2016/12/14 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
layui type2 通过url给iframe子页面传值的例子
2019/09/06 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
NodeJS配置CORS实现过程详解
2020/12/02 NodeJs
利用soaplib搭建webservice详细步骤和实例代码
2013/11/20 Python
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
Python实现繁体中文与简体中文相互转换的方法示例
2018/12/18 Python
python openCV获取人脸部分并存储功能
2019/08/28 Python
Python短信轰炸的代码
2020/03/25 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
美国休闲服装品牌:Express
2016/09/24 全球购物
EJB发布WEB服务一般步骤
2012/10/31 面试题
化工专业自荐书
2014/06/16 职场文书
群众路线党员个人整改措施
2014/10/27 职场文书
七一建党节慰问信
2015/02/14 职场文书
追讨欠款律师函
2015/05/27 职场文书
Redis可视化客户端小结
2021/06/10 Redis