jQuery-tmpl用于模板渲染用法如下：
.tmpl([data,][options])
- 将匹配的第一个元素作为模板，render指定的数据,data用于render的数据，可以是任意js类型，包括数组和对象。options一般情况下都是选项了，官方指出，此处的options是一个用户自定义的键值对的map，继承自tmplItem数据结构，适用于模板render动作期间。
- 我自己一般options是传入渲染模板还需的辅助的数据
tmpl的基本使用（分别传入对象和数组）
${}就相当于占位符，也可以用{{= }}，= 后面必须加个空格
<body>
<div class="box1"></div>
<div class="box2"></div>
<!-- 对象数据的模板 -->
<script type="text/x-jquery-tmpl" id="objTmpl">
<p>${id}</p>
<p>${name}</p>
<p>{{= age}}</p>
</script>
<!-- 数组数据的模板-数组数据会自动遍历一层 -->
<script type="text/x-jquery-tmpl" id="arrTmpl">
<ul>
<li>${name}</li>
<li>${age}</li>
</ul>
</script>
<script>
var obj = { id: '01', name: 'www', age: 22 };
$('#objTmpl').tmpl(obj).appendTo(".box1");
var arr = [{ name: 'kkk', age: 22 }, { name: 'qq', age: 19 }, { name: 'mm', age: 23 }]
$('#arrTmpl').tmpl(arr).appendTo(".box2");
</script>
</body>
效果
tmpl中重要的两个属性
$item代表当前的模板；$data代表当前的数据。
<body>
<div class="box2"></div>
<script type="text/x-jquery-tmpl" id="arrTmpl">
<ul>
<li>${$data}</li>
<!-- 只是为了看清楚，$data为当前数据 -->
<li>${JSON.stringify($data)}</li>
<li>${$item.setData()}</li>
<li>${console.log($item)}</li>
</ul>
</script>
<script>
var arr = [{ name: 'kkk', age: 22 }, { name: 'qq', age: 19 }, { name: 'mm', age: 23 }]
// 传入数据并传入一些辅助的东西
$('#arrTmpl').tmpl(arr,{
setData:function(){
return "姓名："+ this.data.name +",年龄："+this.data.age; }
}).appendTo(".box2");
</script>
</body>
{{each}}循环和{{if}}和{{else}}判断
{{each}}有两种写法，第一种默认写法：{{each arr}} 这样值为$value,索引为$index。第二种自定义写法：{{each(i,item) arr}} 这样值为item,索引为 i。
<body>
<div class="box"></div>
<script type="text/x-jquery-tmpl" id="tmpl">
{{if $data.length <= 1}}
<ul>
<h1>单条数据</h1>
<p>${$data[0].name}</p>
</ul>
{{else}}
<ul>
<h1>多条数据</h1>
{{each $data}}
<li>${$index}---${$value.name}</li>
{{/each}}
</ul>
{{/if}}
</script>
<script>
var arr = [[{name:'ww',age:11}],[{name:'qq',age:12},{name:'kk',age:23}]]
$("#tmpl").tmpl(arr).appendTo(".box");
</script>
</body>
{{html}}输出变量html,但是没有html编码
<body>
<div class="box"></div>
<script type="text/x-jquery-tmpl" id="tmpl">
<p>${html}</p>
<p>{{html html}}</p>
</script>
<script>
var data = {html:'<button>按钮</button>'};
$('#tmpl').tmpl(data).appendTo(".box");
</script>
</body>
{{tmpl}} 嵌套模板
<body>
<div id="tmpl"></div>
<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: 'think8848', Name: ['Joseph', 'Chan'] }, { ID: 'aCloud', Name: ['Mary', 'Cheung']}];
$("#tmpl1").tmpl(users).appendTo('#tmpl');
</script>
</body>
{{warp}}包装器
<body>
<div id="wrapDemo">
</div>
<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>
${console.log($item)}
{{each $item.html("div", true)}}
<!-- true表示获取获取标签中的文本内容，false表示获取包括标签的全部内容 -->
<td>
${$value}
</td>
{{/each}}
</tr>
<tr>
{{each $item.html("div")}}
<td>
{{= $value}}
{{html $value}}
</td>
{{/each}}
</tr>
</tbody></table>
</script>
<script type="text/javascript">
$(function () {
$('#myTmpl').tmpl().appendTo('#wrapDemo');
});
</script>
</body>
补充方法
$.tmplItem()方法，使用这个方法，可以获取从render出来的元素上重新获取$item$.template()方法,将一段Html编译为模板
var markup = '<tr><td>${ID}</td><td>${Name}</td></tr>';
$.template('template', markup);
$.tmpl('template', users).appendTo('#templateRows');
引用：
