jquery.tmpl.js 是一個模板js ,主要有2個方法
(1):$.template()方法，將一段script或者是Html編譯為模板,例如 $.template('myTemplate', markup); 后者的markup一般是一段script腳本包圍的變量名，或者是js里面的變量名，而前者的myTemplate則是指，我將markup編譯為一個模板緩存，模板名稱為myTemplate，如果我以后有需要在其他地方調用，則只用拿 myTemplate 即可，因為他已經在js的緩存里面了
(2):$('#myTemplate ).tmpl(userLangs).appendTo('#eachList');
//模板 綁定 Json數據 添加到 指定的div或者是容器里面
一：基本使用方法演示 分4個步驟：(1)引入jquery和tmpl腳本 (2)開始寫需要填充的模板和變量 (3)數據准備(4) 綁定模板
<!--引入腳本-->
<script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="js/jquery.tmpl.js" type="text/javascript"></script>
<!--開始寫模板-->
<script id="each" type="text/x-jquery-tmpl">
<li>ID: ${ID}; Name: ${Name};<br />Langs:<ul>{{each Langs}}<li>${$index + 1}: <label>${$value}. </label></li>{{/each}}</ul></li>
</script>
<script type="text/javascript">
$(function () {
//這里是數據
var userLangs = [
{
ID: 'think8848', Name: 'Joseph Chan', Langs: ['Chinese', 'English']
},
{
ID: 'aCloud', Name: 'Mary Cheung', Langs: ['Chinese', 'French']
}];
//模板 綁定 數據 添加到 指定的div或者是容器里面
$('#each').tmpl(userLangs).appendTo('#eachList');
});
</script>
然后我們在html頁面里面，給一個容器，用於顯示數據綁定之后添加到什么容器上，可以是div也可以是其他的，例如這里是ul
1: <ul id="eachList">
2: <!--這里是將要顯示到的DIV層-->
3: </ul>
4:
顯示結果
生成的html代碼
二：高級一點的運用
Ajax獲取Json數據，並綁定,並且我們的模板，第一個 采用 script 包圍的方式，第二個則直接采用 js變量
$(function () {
$.ajax({
type: "post",
url: "handler/xxHandler.ashx",
data: { classid: "12000001989", type: "getclassinfo" },
dataType: "json",
success: populate //如果ajax成功，則執行這個操作
});
function populate(data) {
// 把模板標記，編譯成[模板緩存]，起個名字叫 eachTemplate,方便我們以后在其他地方調用
$.template("eachTemplate", each);
//把緩存 加入 數據，然后添加到容器里面
$.tmpl("eachTemplate", data).appendTo("#eachList");
// 同一個數據，也能第二次利用
$.template("hwTemplate", HomeWorkSendTemplate);
//把緩存 加入 數據，然后添加到容器里面
$.tmpl("hwTemplate", data).appendTo("#hwList");
};
});
后台 handler 獲取參數，並且返回 序列化的 json 給前台腳本
模板方式一：使用script腳本包圍的方式，注意，一定要加上一個 type="text/x-jquery-tmpl"
<script id="each" type="text/x-jquery-tmpl"> //模板1 直接用script腳本包圍的變量 注意后面一定要加type為 tmpl的特定值 <li>班級Id: ${ClassId}; 班級名稱: ${ClassName};<br />Langs:<ul>{{each Langs}}<li>${$index + 1}: <label>${$value}. </label></li>{{/each}}</ul></li> </script>
模板方式二，采用外部鏈接 js 腳本的方式，這種方式 不用自己在后面寫 type="text/x-jquery-tmpl"
<script src="js/mytemplates.js" type="text/javascript"></script>
/* 模板二 直接在 其他的例如 mytemplate.js 里面寫變量 即可 注意，要在自己的頁面里面進行腳本引入 */ var HomeWorkSendTemplate = '<div id="hwsendmain_${ClassId}" class="content_body">'; HomeWorkSendTemplate += '<!--布置作業開始--><div id="tag15">'; HomeWorkSendTemplate += ' <div class="content">'; HomeWorkSendTemplate += ' <div class="top">布置作業</div>';
三：使用復雜的json格式展示數據
(1):准備好模板，這里我們是使用一個表格來展示，所以模板是用的tr來顯示每一行的數據
<!—模板 直接用script腳本包圍的變量 注意后面一定要加type為 tmpl的特定值-->
<script id="classMuban" type="text/x-jquery-tmpl">
<tr><td>${Cid}</td>
<td>${Cname}</td><td><ul>{{each Students}}
<li>序號${$index + 1}: <label>學生id:${$value.Sid}學生名稱:${$value.Sname}
學生頭像:{{if $value.Sphoto}}
<img src="${$value.Sphoto}" /> {{else}} <img src="images/ico_01.png" title="這里是默認頭像"/> {{/if}} 學生是否選中:${$value.Check}</label></li>{{/each}}</ul>
</td>
</tr>
</script>
(2):准備數據，以及當文檔加載完畢之后，執行綁定
//這里一定要加上，是在文檔載入完成之后，才執行綁定模板的 $(function () { var demodata = [{ "Cid": "1", "Cname": "三年二班", "Check": "0 0表示1個都沒有勾選 1表示至少勾選了1個 2表示全部勾選", "Cphoto": "班級圖片地址", "Students": [ { "Sid": "s1", "Sname": "周傑倫", "Sphoto": "", //這里可能沒有圖片，那么我們顯示的時候，還要判斷是否顯示默認圖片 "Check": "0表示沒有勾選 1表示已經勾選" }, { "Sid": "s2", "Sname": "李宇春", "Sphoto": "http://pic.cnitblog.com/face/582230/20131114141342.png", "Check": "0表示沒有勾選 1表示已經勾選" } ] } , { "Cid": "1", "Cname": "三年四", "Check": "0 0表示1個都沒有勾選 1表示至少勾選了1個 2表示全部勾選", "Cphoto": "班級圖片地址", "Students": [ { "Sid": "s3", "Sname": "周筆暢", "Sphoto": "http://pic.cnitblog.com/face/572602/20131112163110.png", "Check": "0表示沒有勾選 1表示已經勾選" }, { "Sid": "s4", "Sname": "董瑞", "Sphoto": "http://pic.cnitblog.com/face/u119077.jpg", "Check": "0表示沒有勾選 1表示已經勾選" } ] }]; //編譯模板classMuban為一個變量名-> nameClassMuban 這樣以后在其他地方，就可以方便調用 nameClassMuban了 $.template("nameClassMuban", window.classMuban); //把模板緩存 加入 數據，然后添加到容器里面 $.tmpl("nameClassMuban", demodata).appendTo("#showMyJson"); });
(3):容器，這里為了顯示方便，我們就用一個表格，並且第一行，我們自己已經給了。如果是實際項目中，一般都是DIV做容器
<table id="showMyJson" border="1"> <tr> <td> 班級Id</td> <td> 班級名稱</td> <td> 班級學生</td> </tr> </table>
最后我們來看看效果如何
代碼生成如下