当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jQuery .tmpl() 用法示例介绍

jQuery .tmpl() 用法示例介绍

2019年03月26日  | 移动技术网IT编程  | 我要评论

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

这些情况下，动态请求返回的数据一般不是已拼好的 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="https://code.jquery.com/jquery-latest.min.js"></script> 
<script src="https://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=https://www.2cto.com/uploadfile/2018/0117/20180117033546127.png" height="12" alt=""/></button> 
<button type="button" class="button small add-param"><span><img src=https://www.2cto.com/uploadfile/2018/0117/20180117033546415.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>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网