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加入到指定的标签下。

2、{{each}}标签

该标签提供循环逻辑，使用$value访问迭代变量，也可以自定义迭代变量(i,value)，下面举个例子说明下两种方式的用法

模板代码：

<script id="each" type="text/x-jquery-tmpl">     <h3>usersh3>    {{each(i,user) users}}        <div>${i+1}:${user.name}div>    {{/each}}    <h3>departh3>    {{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>

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 : ''  };  $("#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，代表当前的模板。