随时随地阅读更多技术实战干货,获取项目源码、学习资料,请关注源代码社区公众号(ydmsq666)
动态请求数据来更新页面是现在非常常用的方法,服务器端通常返回的json格式的数据,如果我们手动的去拼装HTML将是一件非常麻烦的事,而且非常容易出错,因此一些用模版生成HTML的的框架相继出现,jQuery-tmpl 就是其中的一种,jQuery-tmpl是一个简单的模板引擎,能够实现动态的修改DOM数据,使用简单易懂的语法结构,通过JSON的格式传递和绑定数据,这也是jQuery官方团队维护的模板引擎,很不幸的是这个项目将不再提供维护更新,将由JsRender替代。如果你还是喜欢使用jQuery-tmpl,之前的版本依然可以使用,这篇文章将为你详细地介绍如何使用jQuery-tmpl,该插件十分小巧(5.97KB),对于性能的影响并不大。
jQuery-tmpl的几种常用标签分别有:
- ${}
- {{each}}
- {{if}}
- {{else}}
- {{html}}
不常用标签是:
- {{=}}
- {{tmpl}}
- {{wrap}}
1、${}和{{=}}
${}等同于{{=}},输出变量 ,${}里面还可以放表达式 (=和变量之间一定要有空格,否则无效)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../js/jquery.js"></script>
<script src="../js/jquery.tmpl.js"></script>
<title>测试jQuery-tmpl的使用</title>
</head>
<body>
<div id="div_demo"></div>
</body>
<!-- 模板1,测试${}、{{=}}标签的使用 -->
<script id="demo" type="text/x-jquery-tmpl">
<div style="margin-bottom:10px;">
<span>${id}</span>
<span style="margin-left:10px;">{{= name}}</span>
<span style="margin-left:10px;">${age}</span>
<span style="margin-left:10px;">${number}</span>
</div>
</script>
<script type="text/javascript">
//手动初始化数据
var users = [{id: 1, name: 'xiaoming', age: 12, number: '001'}, {id: 2, name: 'xiaowang', age: 13, number: '002'}];
//调用模板进行渲染
$("#demo").tmpl(users).appendTo('#div_demo');
</script>
</html>
这是一个完整的例子,先定义一个模板,模板里面定义好怎么展示对应数据,推荐使用${}标签,然后在js里面手动初始化数据,在实际项目中一般通过ajax从服务器上获取,然后调用模板进行渲染,再把渲染后的html加入到指定的标签下。
步骤很简单
1-定义模板,2-渲染,3-处理渲染后html
效果如下:
下面再介绍其他几种标签
2、{{each}}标签
该标签提供循环逻辑,使用$value访问迭代变量,也可以自定义迭代变量(i,value),下面举个例子说明下两种方式的用法
模板代码:
<!-- {{each}}标签的使用 -->
<script id="each" type="text/x-jquery-tmpl">
<h3>users</h3>
{{each(i,user) users}}
<div>${i+1}:${user.name}</div>
{{/each}}
<h3>depart</h3>
{{each departs}}
<div>{{= $value.name}}</div>
{{/each}}
</script>
js调用代码:
<script type="text/javascript">
var eachData = {
users : [ {
name : 'xiaoming'
}, {
name : 'xiaowang'
} ],
departs : [ {
name : 'IT'
}, {
name : 'test'
} ]
};
$("#each").tmpl(eachData).appendTo('#div_each');
</script>
代码非常简单,直接上效果图:
3、{{if }} {{else}}标签
选择判断标签,提供了分支逻辑 {{else}} 相当于else if
<!--{{if }} {{else}}标签的使用 -->
<script id="ifelse" type="text/x-jquery-tmpl">
<div style="margin-bottom:10px;"><span>${id}</span><span style="margin-left:10px;">{{= name}}</span>
{{if status}}
<span>status:${status}</span>
{{else app}}
<span>app:${app}</span>
{{else}}
<span>none</span>
{{/if}}
</div>
</script>
<script type="text/javascript">
var users = [ {
id : 1,
name : 'xiaoming',
status : 1,
app : 0
}, {
id : 2,
name : 'xiaowang',
app : 1
}, {
id : 3,
name : 'xiaogang'
} ];
$("#ifelse").tmpl(users).appendTo('#div_ifelse');
</script>
模板里面根据if else的判断来决定显示具体数据,效果如下:
4、{{html}}标签,输出变量html,但是没有html编码,适合输出html代码
<!--{{html}}标签的使用 -->
<script id="html" type="text/x-jquery-tmpl">
<div style="margin-bottom:10px;">
<span>${id}</span>
<span style="margin-left:10px;">${name}</span>
${button}
{{html button}}
</div>
</script>
<script type="text/javascript">
var user = {
id : 1,
name : 'xiaoming',
button : '<button>save</button>'
};
$("#html").tmpl(user).appendTo('#div_html');
</script>
使用了html标签的html内容自动转成了按钮
5、{{tmpl}}嵌套模板
<body>
<div id=tmpl></div>
</body>
<!--{{tmpl}}嵌套模版、$data的使用 -->
<script id="tmpl1" type="text/x-jquery-tmpl">
<div style="margin-bottom:10px;">
<span>${id}</span>
<span style="margin-left:10px;">{{tmpl($data) '#tmpl2'}}</span>
</div>
</script>
<script id="tmpl2" type="type/x-jquery-tmpl">
{{each name}}
${$value}
{{/each}}
</script>
<script type="text/javascript">
var users = [ {
id : 1,
name : [ 'zhang', 'xiao', 'liang' ]
}, {
id : 2,
name : [ 'li', 'tian', 'ming' ]
} ];
$("#tmpl1").tmpl(users).appendTo('#tmpl');
</script>
思路就是,在模板1里面嵌套了模板2,模板2的作用就是把name数组连起来显示,这个例子中还使用到了$data标签,$data代表当前的数据。
6、{{wrap}}包装器标签
<body>
<div id=wrap></div>
</body>
<!--{{wrap}}包装器、$item的使用 -->
<script id="myTmpl" type="text/x-jquery-tmpl">
The following wraps and reorders some HTML content:
{{wrap "#tableWrapper"}}
<h3>One</h3>
<div>
First <b>content</b>
</div>
<h3>Two</h3>
<div>
And <em>more</em> <b>content</b>...
</div>
{{/wrap}}
</script>
<script id="tableWrapper" type="text/x-jquery-tmpl">
<table cellspacing="0" cellpadding="3" border="1"><tbody>
<tr>
{{each $item.html("h3", true)}}
<td>
${$value}
</td>
{{/each}}
</tr>
<tr>
{{each $item.html("div")}}
<td>
{{html $value}}
</td>
{{/each}}
</tr>
</tbody></table>
</script>
<script type="text/javascript">
$('#myTmpl').tmpl().appendTo('#wrap');
</script>
在myTmpl模板里面引用了包装器模板tableWrapper来包装myTmpl模板,tableWrapper是一个表格包装模板,把所有h3标签内容作为表格第一行,把所有div下面的标签作为表格的第二行,所以对myTmpl进行了重组,在这个例子中还用到另一个标签$item,代表当前的模板,效果如下:
本文用实际例子介绍了一下jquery.tmpl标签的常见用法,在一般项目中已经够使用了.
了解更多内容,请看GitHub上项目源码:
https://github/BorisMoore/jquery-tmpl
更多推荐
jQuery-tmpl模板引擎使用详解
发布评论