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变量来占位的方式来填充数据,代码看起来好多了。

来源:http://liunian.info/jquery-tmpl.html

Tmpl提供了几种tag:

${}:等同于{{=}},是输出变量,通过了html编码的。

{{html}}:输出变量html,但是没有html编码,适合输出html代码。

{{if}}{{else}}:提供了分支逻辑。

{{each}}:提供循环逻辑,$value访问迭代变量。

jquerytmpl的使用方法:

模板定义:

方法一:

Js代码

<scriptid="movieTemplate"type="text/x-jquery-tmpl">

<li>

<b>${Name}</b>(${ReleaseYear})

</li>

</script>

方法二:

Js代码

functionmakeTemplate(){

varmarkup=’<li><b>${Name}</b>(${ReleaseYear})</li>‘;

$.template(“movieTemplate”,markup);

}

DATA:

Js代码

varmovies=[

{Name:"TheRedViolin",ReleaseYear:"1998"},

{Name:"EyesWideShut",ReleaseYear:"1999"},

{Name:"TheInheritance",ReleaseYear:"1976"}

];

Script:

Js代码

$("#movieTemplate").tmpl(movies)

.appendTo("#movieList");

来源:http://www.blogjava.net/bang/archive/2012/03/06/371306.html

实例1:

Html代码

<!DOCTYPEhtml>

<html>

<head>

<scriptsrc="http://code.jquery.com/jquery-latest.min.js"></script>

<scriptsrc="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>

</head>

<body>

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

<scripttype="text/x-jquery-tmpl"id="new-param-tmpl">

<lirel="${num}">

<inputtype="text"name="key[${num}]"value="${key}"placeholder="key"/>=

<inputtype="text"name="value[${num}]"value="${value}"placeholder="value"/>

<buttontype="button"class="buttonsmallremove-param"><imgsrc="http://mediacdn.disqus.com/1338845651/images/v3/icon/16/69.png"height="12"alt=""/></button>

<buttontype="button"class="buttonsmalladd-param"><span><imgsrc="http://mediacdn.disqus.com/1338845651/images/v3/icon/16/13.png"height="12"alt=""/></button>

</li>

</script>

<script>

$(function(){

functionaddParam(key,value){

varparam_list=$('.param-list');

varnum=param_list.find('li').length;

//buildatemplatetoclonethecurrentrow

varbuilt=$('#new-param-tmpl').tmpl({

num:num,

key:key||'',

value:value||'',

});

if(key)param_list.prepend(built);

elseparam_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();

}

//bindevents

$('.param-list.remove-param').live('click',function(){

$(this).parent().remove();

returnfalse;

});

$('.param-list.add-param').live('click',function(){

addParam();

returnfalse;

});

addParam();

})

</script>

</body>

</html>

实例2

Html代码

<ulid="movieList"></ul>

<scriptid="movieTemplate"type="text/x-jquery-tmpl">

<li><b>${Name}</b>(${ReleaseYear})</li>

</script>

<scripttype="text/javascript">

varmovies=[

{Name:"TheRedViolin",ReleaseYear:"1998"},

{Name:"EyesWideShut",ReleaseYear:"1999"},

{Name:"TheInheritance",ReleaseYear:"1976"}

];

//Renderthetemplatewiththemoviesdataandinsert

//therenderedHTMLunderthe"movieList"element

$("#movieTemplate").tmpl(movies)

.appendTo("#movieList");

</script>

相关推荐