要随时随地阅读更多技术实战干货，获取项目源代码、学习资料，请关注源代码社区公众号(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、${}和{=}}
${}与{{=}}相同，也可以在输出变量${}中包含表达式。 请务必在=和变量之间输入空格。 否则无效。 ）
！ doctypehtmlhtmlheadmetacharset=' utf-8 ' script src=' ./js/jquery.js '/script src=' ./js/jquery.ttrc 使用{=}标记--scriptid=' demo ' type=' text/x-jquery-tmpl ' div style=' margin-bottom 336000 span $ { id }/span style {=name }/span span style=' margin-left 336010 px；' $ { age }/span span style=' margin-left :10 px；' $ { number }/span/div/script script type=' text/JavaScript ' /手动初始化数据var users=[{id: 1，name : ' Xiaoming { //调用模板进行渲染$(#demo ).tmpl ) ) users ).appendto ) ) #div_demo )； /script/html这是一个完整的例子。 首先定义模板。 模板定义了如何显示对应的数据。 建议使用${}标记。 然后在js中手动初始化数据，在实际项目中，通常在ajax中从服务器检索数据，调用模板进行渲染，然后将渲染后的html添加到指定的标记下。
步骤很简单
1-模板定义、2-渲染、3-渲染后处理html
效果如下。
下面是其他一些标签
2、{{each}}标签
此标记提供了组逻辑，还可以使用$value访问迭代变量并自定义迭代变量(I，value )。 以下举例说明以下两种方法的使用方法
模板代码：
！ 使用-- {{each}}标记--- scriptid=' each ' type=' text/x-jquery-tmpl ' H3 users/H3 { { each (I，user(users ) )
script type=' text/JavaScript ' vareachdata={ users : [ { name : ' Xiaoming ' }，{name : 'xiaowang'} ]，derd
: [ {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