jquery tmpl简介:动态请求数据更新页面非常常用的方法,例如博客评论的分页动态加载,微博的滚动加载和定时请求加载以及ajax请求返回数据等。
这些情况下,动态请求返回的数据一般不是已拼好的html就是JSON或XML,总之不在浏览器端拼接数据就在服务器端拼接数据。
浏览器端根据JSON生成HTML有个很苦恼的地方就是,结构不复杂的时候还好,结构一复杂,就需要很小心的写出几乎无法维护的javascript代码。
因此,一些用模板生成HTML的框架相继出现jquery.tmpl就是其中一种,下面讲一下jquery.tmpl的使用语法,可分为三大类:
1、显示类
{{html}}/{{= }}/${},这三个标签多能够将数据输出到模板中,但是{{html}}不会对数据进行编码,用于输出数据中的HTML代码段,
而{{=}}和${}怎会对数据进行编码,防止数据对于模板结构的破坏。
2、条件判断及循环
{{if}}/{{else}}/{{/if}}/{{each}}请注意是没有for/while/switch的,相对来说jquery Tmpl只支持
较为简单的逻辑判断,当然如果你感觉这些满足不了你的需求的话,可以自己写函数然后调用。
3、复用类
{{tmpl}}当分支模板过长(写在一个模板中较为轮乱)或者使用已经写好的通用模板,{{temp}}的作用就是
调用指定ID模板来显示数据。
下面具体写个例子表现一下:
例1:通过直接写json字符串的形式引入数据。
<div style="margin-top: 30px;">
<h3>地区</h3>
<div id="place"></div>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.tmpl.js"></script>
<script type="text/tmpl" id="temp">
<span style="margin: 0 6px;">${place}</span>
</script>
<script>
var origin={
plc:[
{place:'上海'},
{place:'深圳'},
{place:'北京'},
{place:'广州'}
]
};
$('#temp').tmpl(origin.plc).appendTo('#place');
</script>
例2:通过getJSON引入json数据。
<div style="margin-top: 30px;">
<h3>地区</h3>
<div id="place"></div>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.tmpl.js"></script>
<script type="text/tmpl" id="temp">
<span style="margin: 0 6px;">${place}</span>
</script>
<script>
$.getJSON('json/place.json',function(data){
//通过拼接字符串的形式书写
/*var str="";
for(var i=0;i<data.plc.length;i++){
str+='<span style="margin: 0 6px;">'+data.plc[i].place+'</span>';
console.log("str:"+str);
}
$('#place').append(str);
*/
//tmpl形式
$('#temp').tmpl(data.plc).appendTo('#place');
});
</script>
place.json数据内容为:
{
"plc":[
{"place":"上海"},
{"place":"深圳"},
{"place":"北京"},
{"place":"广州"}
]
}
例3:读取多个参数信息。
<div class="container">
<table border="1px" cellpadding="5" cellspacing="0" width="100%">
<thead>
<tr>
<td>firstName</td>
<td>lastName</td>
<td>email</td>
<td>place</td>
</tr>
</thead>
<tbody id="tbody"></tbody>
</table>
<table border="1px" cellpadding="5" cellspacing="0" width="100%" style="margin-top: 30px;">
<thead>
<tr>
<td>Name</td>
<td>Level</td>
<td>img</td>
</tr>
</thead>
<tbody id="tbody2"></tbody>
</table>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.tmpl.js"></script>
<script type="text/tmpl" id="temp">
<tr>
<td>${firstName}</td>
<td>{{= lastName}}</td>
<td>{{html email}}</td>
<td>{{html place}}</td>
</tr>
</script>
<script type="text/tmpl" id="temp2">
<tr>
<td>${name}</td>
<td>${level}</td>
<td><img src="${img}"/></td>
</tr>
</script>
<script>
$.getJSON("json/test.json",{},function(data){
$('#temp').tmpl(data.programmers).appendTo('#tbody');
$('#temp2').tmpl(data.authors).appendTo('#tbody2');
});
</script>
test.json数据内容为:
{
"programmers":[
{"firstName":"Lucy","lastName":"zhao","email":"123456","place":"上海"},
{"firstName":"Tizzy T","lastName":"wang","email":"123","place":"北京"}
],
"authors":[
{"name":"Any","level":"one","img":"./img/foot_21.png"},
{"name":"cool","level":"two","img":"img/foot_31.png"},
{"name":"Luck","level":"three","img":"img/foot_41.png"}
],
"origin":[
{"place":"上海"},
{"place":"深圳"},
{"place":"北京"},
{"place":"广州"}
]
}
注意:页面中引入有jquery和jquery.tmpl文件,必要时修改一下路径。