前言
JsRender是一款基於jQuery的JavaScript模版引擎，它具有如下特點：
· 簡單直觀
· 功能強大
· 可擴展的
· 快如閃電
這些特性看起來很厲害，但幾乎每個模版引擎，都會這么宣傳。。。
由於工作需要，小菜才接觸到此款模版引擎。使用了一段時間，發現它確實比較強大，但小菜覺得有些地方強大的過頭了，反倒讓人覺得很難理解。
另一方面，JsRender的官方文檔比較詳細，但其他資料出奇的少，遇到點什么問題，基本搜不到，不僅僅是相關問題搜不到，幾乎就是沒有結果。
再加上JsRender有些地方確實是不好理解，所以急需小菜分享一些“最佳實踐”。
基於最近一段時間的使用，小菜總結了一些實用經驗，當然，這些經驗在官方文檔上是找不到的。
注意：本文不是基礎入門教程，以下例子中自帶注釋，不做過多說明，讀者自行體會，不懂的地方可以留言。
嵌套循環使用#parent訪問父級數據（不推薦）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>嵌套循環使用#parent訪問父級數據 --- by 楊元</title> 6 <style> 7 </style> 8 9 </head> 10 <body> 11 12 <div> 13 <table> 14 <thead> 15 <tr> 16 <th width="10%">序號</th> 17 <th width="10%">姓名</th> 18 <th width="80%">家庭成員</th> 19 </tr> 20 </thead> 21 <tbody id="list"> 22 23 </tbody> 24 </table> 25 </div> 26 27 <script src="jquery.min.js"></script> 28 <script src="jsviews.js"></script> 29 30 <!-- 定義JsRender模版 --> 31 <script id="testTmpl" type="text/x-jsrender"> 32 <tr> 33 <td>{{:#index + 1}}</td> 34 <td>{{:name}}</td> 35 <td> 36 {{for family}} 37 {{!-- 利用#parent訪問父級index --}} 38 <b>{{:#parent.parent.index + 1}}.{{:#index + 1}}</b> 39 {{!-- 利用#parent訪問父級數據，父級數據保存在data屬性中 --}} 40 {{!-- #data相當於this --}} 41 {{:#parent.parent.data.name}}的{{:#data}} 42 {{/for}} 43 </td> 44 </tr> 45 </script> 46 47 <script> 48 //數據源 49 var dataSrouce = [{ 50 name: "張三", 51 family: [ 52 "爸爸", 53 "媽媽", 54 "哥哥" 55 ] 56 },{ 57 name: "李四", 58 family: [ 59 "爺爺", 60 "奶奶", 61 "叔叔" 62 ] 63 }]; 64 65 //渲染數據 66 var html = $("#testTmpl").render(dataSrouce); 67 $("#list").append(html); 68 69 70 </script> 71 72 </body> 73 </html>
嵌套循環使用參數訪問父級數據（推薦）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>嵌套循環使用參數訪問父級數據 --- by 楊元</title> 6 <style> 7 </style> 8 9 </head> 10 <body> 11 12 <div> 13 <table> 14 <thead> 15 <tr> 16 <th width="10%">序號</th> 17 <th width="10%">姓名</th> 18 <th width="80%">家庭成員</th> 19 </tr> 20 </thead> 21 <tbody id="list"> 22 23 </tbody> 24 </table> 25 </div> 26 27 <script src="jquery.min.js"></script> 28 <script src="jsviews.js"></script> 29 30 <!-- 定義JsRender模版 --> 31 <script id="testTmpl" type="text/x-jsrender"> 32 <tr> 33 <td>{{:#index + 1}}</td> 34 <td>{{:name}}</td> 35 <td> 36 {{!-- 使用for循環時，可以在后邊添加參數，參數必須以~開頭，多個參數用空格分隔 --}} 37 {{!-- 通過參數，我們緩存了父級的數據，在子循環中通過訪問參數，就可以間接訪問父級數據 --}} 38 {{for family ~parentIndex=#index ~parentName=name}} 39 <b>{{:~parentIndex + 1}}.{{:#index + 1}}</b> 40 {{!-- #data相當於this --}} 41 {{:~parentName}}的{{:#data}} 42 {{/for}} 43 </td> 44 </tr> 45 </script> 46 47 <script> 48 //數據源 49 var dataSrouce = [{ 50 name: "張三", 51 family: [ 52 "爸爸", 53 "媽媽", 54 "哥哥" 55 ] 56 },{ 57 name: "李四", 58 family: [ 59 "爺爺", 60 "奶奶", 61 "叔叔" 62 ] 63 }]; 64 65 //渲染數據 66 var html = $("#testTmpl").render(dataSrouce); 67 $("#list").append(html); 68 69 </script> 70 71 </body> 72 </html>
自定義標簽(custom tag)中使用else（強烈不推薦）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>自定義標簽中使用else --- by 楊元</title> 6 <style> 7 </style> 8 9 </head> 10 <body> 11 12 <div> 13 <table> 14 <thead> 15 <tr> 16 <th width="50%">名稱</th> 17 <th width="50%">單價</th> 18 </tr> 19 </thead> 20 <tbody id="list"> 21 22 </tbody> 23 </table> 24 </div> 25 26 <script src="jquery.min.js"></script> 27 <script src="jsviews.js"></script> 28 29 <!-- 定義JsRender模版 --> 30 <script id="testTmpl" type="text/x-jsrender"> 31 <tr> 32 <td>{{:name}}</td> 33 <td> 34 {{!-- isShow為自定義標簽，price是傳入的參數，status是附加屬性 --}} 35 {{isShow price status=0}} 36 {{:price}} 37 {{else price status=1}} 38 -- 39 {{/isShow}} 40 </td> 41 </tr> 42 </script> 43 44 <script> 45 //數據源 46 var dataSrouce = [{ 47 name: "蘋果", 48 price: 108 49 },{ 50 name: "鴨梨", 51 price: 370 52 },{ 53 name: "桃子", 54 price: 99 55 },{ 56 name: "菠蘿", 57 price: 371 58 },{ 59 name: "橘子", 60 price: 153 61 }]; 62 63 //自定義標簽 64 $.views.tags({ 65 "isShow": function(price){ 66 var temp=price+''.split(''); 67 68 if(this.tagCtx.props.status === 0){ 69 //判斷價格是否為水仙花數，如果是，則顯示，否則不顯示 70 if(price==(Math.pow(parseInt(temp[0],10),3)+Math.pow(parseInt(temp[1],10),3)+Math.pow(parseInt(temp[2],10),3))){ 71 return this.tagCtxs[0].render(); 72 }else{ 73 return this.tagCtxs[1].render(); 74 } 75 }else{ 76 return ""; 77 } 78 79 } 80 }); 81 82 83 //渲染數據 84 var html = $("#testTmpl").render(dataSrouce); 85 $("#list").append(html); 86 87 </script> 88 89 </body> 90 </html>
用helper代替自定義標簽（推薦）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>用helper代替自定義標簽 --- by 楊元</title> 6 <style> 7 </style> 8 9 </head> 10 <body> 11 12 <div> 13 <table> 14 <thead> 15 <tr> 16 <th width="50%">名稱</th> 17 <th width="50%">單價</th> 18 </tr> 19 </thead> 20 <tbody id="list"> 21 22 </tbody> 23 </table> 24 </div> 25 26 <script src="jquery.min.js"></script> 27 <script src="jsviews.js"></script> 28 29 <!-- 定義JsRender模版 --> 30 <script id="testTmpl" type="text/x-jsrender"> 31 <tr> 32 <td>{{:name}}</td> 33 <td> 34 {{!-- 利用原生的if做分支跳轉，利用helper做邏輯處理 --}} 35 {{if ~isShow(price)}} 36 {{:price}} 37 {{else}} 38 -- 39 {{/if}} 40 </td> 41 </tr> 42 </script> 43 44 <script> 45 //數據源 46 var dataSrouce = [{ 47 name: "蘋果", 48 price: 108 49 },{ 50 name: "鴨梨", 51 price: 370 52 },{ 53 name: "桃子", 54 price: 99 55 },{ 56 name: "菠蘿", 57 price: 371 58 },{ 59 name: "橘子", 60 price: 153 61 }]; 62 63 //Helper 64 $.views.helpers({ 65 "isShow": function(price){ 66 var temp=price+''.split(''); 67 if(price==(Math.pow(parseInt(temp[0],10),3)+Math.pow(parseInt(temp[1],10),3)+Math.pow(parseInt(temp[2],10),3))){ 68 return true; 69 }else{ 70 return false; 71 } 72 } 73 }); 74 75 //渲染數據 76 var html = $("#testTmpl").render(dataSrouce); 77 $("#list").append(html); 78 79 </script> 80 81 </body> 82 </html>
代碼打包