template.js是一款開源的JavaScript模板引擎，用來渲染頁面的。
github地址 https://github.com/yanhaijing/template.js
下載template.js導入項目中
准備測試的json數據
展示頁面
模板文件：用 {{}}做占位符
渲染模板腳本：template(模板名稱，數據)
頁面效果：
上面是已經最簡單的例子。僅僅是顯示，但經常會有添加判斷，比如：
先修改json數據：
模板文件的if判斷，可以看到，需要保存的值可以放在自定義屬性中：txt_age="{{age}}"
{{name=="張三"?1:0}}為三元運算符
因為json是一個集合，所以要循環渲染模板，當然也可以在模板中循環，后面會講
運行結果：可以看到自定義屬性保存了值，也展示了效果
當然：上面是循環渲染模板，那么也可以只渲染一次，傳一個數組給模板文件，
在模板文件中循環添加數據。用each關鍵字，這里的data是json的一個對象 json = {data:[],msg:[]}
遍歷data就用each data，遍歷msg則是each msg 前提它們是數組，通過$value.熟悉名稱取值
既然模板文件需要一個數組，那么就得傳一個數組過來，這里傳json
同樣看看效果：
還有就是：雖然傳過來的是一個集合。你也可以根據索引來取值，比如：
運行結果就不貼圖了
一個簡簡單單的例子，數據都是模擬數據，僅供參考，測試源代碼如下
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="Do._default" %> 2 3 <!DOCTYPE html> 4 <%--https://github.com/yanhaijing/template.js--%> 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <script src="jquery-1.10.2.js"></script> 8 <script src="template.js"></script> 9 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 10 <title></title> 11 <script type="text/javascript"> 12 $(function () { 13 14 //-------------- 15 var json = { 16 name: '張三', 17 age: 18, 18 address: '深圳' 19 }; 20 //$("#warp").append(template("info-tpl", json)); 21 22 //-------------- 23 json = { 24 data: [ 25 { 26 name: '張三', 27 age: 18, 28 address: '深圳' 29 }, 30 { 31 name: '李四', 32 age: 28, 33 address: '深圳' 34 }, 35 { 36 name: '王五', 37 age: 28, 38 address: '深圳' 39 } 40 ], 41 msg: [ 42 { 43 name: '張三11', 44 age: 18, 45 address: '深圳' 46 } 47 ] 48 }; 49 50 //循環渲染模板 51 //$.each(json.data, function (i, v) { 52 // $("#warp").append(template("info-tpl1", v)); 53 //}); 54 55 //-------------- 56 //$("#warp").append(template("info-tpl2", json)); 57 58 $("#warp").append(template("info-tpl3", json)); 59 60 }) 61 </script> 62 </head> 63 <body> 64 <form id="form1" runat="server"> 65 <!--展示部分顯示--> 66 <div id="warp"> 67 </div> 68 </form> 69 </body> 70 </html> 71 <!--簡單模板文件--> 72 <script id="info-tpl" type="text/html"> 73 <div>{{name}}</div> 74 <div>{{age}}</div> 75 </script> 76 77 <!--條件判斷：模板文件--> 78 <script id="info-tpl1" type="text/html"> 79 <div txt_age="{{age}}"><!--txt_age為自定義屬性--> 80 {{if name=="張三"}} 81 <label style="color: red;">{{name}}</label> 82 {{else if name=="李四"}} 83 <label style="color: plum;">{{name}}</label> 84 {{else}} 85 <label style="color: blue;">{{name}}</label> 86 {{/if}} 87 88 {{name=="張三"?1:0}} 89 </div> 90 </script> 91 92 <!--索引取值：模板文件--> 93 <script id="info-tpl2" type="text/html"> 94 <div> 95 {{data[0].name}} 96 </div> 97 <div> 98 {{data[1].name}} 99 </div> 100 </script> 101 102 103 <script id="info-tpl3" type="text/html"> 104 <div> 105 <select class="form-control" style="width: 100px;"> 106 {{each data}} 107 <option id="{{$value.age}}">{{$value.name}}</option> 108 {{/each}} 109 </select> 110 </div> 111 </script>