jquery.tmpl的使用
jquery.tmpl是jQuery模板插件,http://plugins.jquery.com/tmpl/ （另外还有一个插件dot.js，不依赖与jquery,性能更佳，使用方法大同小异）
在网页中大量使用异步请求数据来更新页面内容非常常见，异步请求返回的内容一般是表现为json格式的数据，因为HTML结构的复杂性，我们在没有使用任何工具下要将json表现格式的数据生成HTML是非常繁琐的，而且容易出错，不好维护。因此通过jquery.tmpl和定义HTML模板可以轻松很多，更利于维护。
Tmpl提供了几种tag：
1, ${}：等同于{{=}}，是输出变量，通过了html编码的。
2, {{html}}:输出变量html,但是没有html编码，适合输出html代码。
3, {{if }} {{else}}:提供了分支逻辑。
4, {{each}}:提供循环逻辑，$value访问迭代变量。
基本使用
1，首先我们需要引用jquery.js和jquery.tmpl.js
2，定义一个模板
3，调用tmpl()方法：$("模板ID").tmpl(data);
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
</head>
<style type="text/css">
#list li {
padding: 8px 0;
line-height: 1.8em;
list-style-type: decimal;
}
</style>
<body>
<ul id="list"></ul>
</body>
</html>
<script type="text/javascript" src='jquery.js'></script>
<script type="text/javascript" src='jquery.tmpl.js'></script>
<!--定义一个User模板-->
<script type="text/template" id='UserTmpl'>
<li>
<span>${NickName}</span>
<span>${Age}</span>
<span>${Gender}<span>
</li>
</script>
<script type="text/javascript">
var users=[{ID:"0001",NickName:"小白",Gender:false,Age:18},{ID:"0001",NickName:"小黑",Gender:true,Age:20}];
$("#list").append($("#UserTmpl").tmpl(users));
</script>
{{if }} {{else}}的使用
明显对于性别Gender属性需要使用到{{if}}和{{else}}了
修改一下模板 {{if}}后面加的就是符合if里面条件后要输出的HTML, 使用{{if}}需要有结束标记{{/if}}
<li>
<span>${NickName}</span>
<span>${Age}</span>
{{if Gender}}
<span>男</span>
{{else}}
<span>女</span>
{{/if}}
</li>
{{each}}使用
<script id="each" type="text/x-jquery-tmpl">
<li>
<span>${Title}</span>
<span>Languages:</span>
<ul>
{{each Languages}}
<li>${$value.Name}</li>
{{/each}}
<ul>
</li>
</script>
<script type="text/javascript">
var movies = [{Title: "Meet Joe Black", Languages: [{ Name: "English" },{ Name: "French" }]}];
$("#each").tmpl(movies).appendTo('#div_each');
</script>
