脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery .tmpl()

jQuery .tmpl() 用法示例介绍

 更新时间：2014年08月21日 11:22:43   投稿：whsnow  
解决 PHP 拼数据这方面的问题而有了 Smarty 这些模版，JavaScript 也可以利用模版来解决这些问题，比如基于 jQuery 的 jquery.tmpl

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

这些情况下，动态请求返回的数据一般不是已拼好的 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>
您可能感兴趣的文章:

相关文章

  • jQuery Migrate 1.1.0 Released 注意事项

    jQuery Migrate 1.1.0 Released 注意事项

    jQuery开发团队前一段时间发布了jQuery 1.9版本，删除了1.8版本中的部分API，为了使前端开发者能够顺利迁移至该版本，该团队还发布了迁移插件jQuery Migrate
    2014-06-06
  • jQuery的deferred对象使用详解

    jQuery的deferred对象使用详解

    jQuery的开发速度很快，几乎每半年一个大版本，每两个月一个小版本。每个版本都会引入一些新功能。今天我想介绍的，就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象。
    2011-08-08
  • JS Canvas定时器模拟动态加载动画

    JS Canvas定时器模拟动态加载动画

    这篇文章主要为大家详细介绍了JS Canvas定时器模拟动态加载动画,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • jQuery中ajax的load()方法用法实例

    jQuery中ajax的load()方法用法实例

    这篇文章主要介绍了jQuery中ajax的load()方法用法,以实例形式较为详细的分析了load()方法的功能、参数及使用技巧,是非常实用的技巧,需要的朋友可以参考下
    2014-12-12
  • 根据Bootstrap Paginator改写的js分页插件

    根据Bootstrap Paginator改写的js分页插件

    本文主要对根据Bootstrap Paginator改写的js插件进行详细介绍，具有很好的参考价值，需要的朋友一起来看下吧
    2016-12-12
  • jQuery中parentsUntil()方法用法实例

    jQuery中parentsUntil()方法用法实例

    这篇文章主要介绍了jQuery中parentsUntil()方法用法,实例分析了parentsUntil()方法的功能、定义及根据条件查找匹配元素的所有的祖先元素使用技巧,需要的朋友可以参考下
    2015-01-01
  • jQueryUI中的datepicker使用方法详解

    jQueryUI中的datepicker使用方法详解

    JqueryUI作为一个优秀的前端库，在项目中经常会用到，下面小编抽点时间给大家介绍jQueryUI中的datepicker使用方法详解，一起看看吧
    2016-05-05
  • jQuery中offsetParent()方法用法实例

    jQuery中offsetParent()方法用法实例

    这篇文章主要介绍了jQuery中offsetParent()方法用法,实例分析了offsetParent()方法的功能、定义及返回匹配元素所有祖先元素中第一个采用定位的祖先元素时的使用技巧,需要的朋友可以参考下
    2015-01-01
  • 使用jQuery+HttpHandler+xml模拟一个三级联动的例子

    使用jQuery+HttpHandler+xml模拟一个三级联动的例子

    昨天同学问我有关如何快速读取多层级xml文件的问题，于是我就使用省、市、县模拟了一个三级联动的例子，客户端使用jQuery实现异步加载服务器返回的json数据，服务器端则使用XPath表达式查询数据。
    2011-08-08
  • EasyUI中combobox默认值注意事项

    EasyUI中combobox默认值注意事项

    这篇文章主要介绍了EasyUI中combobox默认值注意事项,是个人在项目中遇到并解决的事宜，分享给大家，需要的朋友可以参考下
    2015-03-03

最新评论