jQuery-tmpl模板引擎使用详解

u010142437

已于 2022-01-21 19:05:04 修改

阅读量1.4w

点赞数 3

分类专栏： web 文章标签： jquery-tmpl jquery 模板引擎 html渲染

于 2018-11-23 17:44:45 首次发布

本文链接：https://blog.csdn.net/u010142437/article/details/84399222

版权

web 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(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.com/BorisMoore/jquery-tmpl

u010142437

关注

3
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
1
评论
jQuery-tmpl模板引擎使用详解

随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666)、博主微信（guyun297890152）、QQ技术交流群(183198395)。动态请求数据来更新页面是现在非常常用的方法，服务器端通常返回的json格式的数据，如果我们手动的去拼装HTML将是一件非常麻烦的事，而且非常容易出错，因此一些用模版生成HTML的的框架相继出现，jQuery-tmp...
复制链接

扫一扫