在寫Web程序時，想簡單處理會使用JS模板，常用的是Jquery的jquery.tmpl.js插件。整個插件還是比較好用的，后續有機會結合實際應用案例，分享下應用方法。
本次文章想分享的一點是其中的一個很小的細節：支持行標index。
具體的使用場景是：通過表格展示數據，同時第一列為序號，會存在刪除、新增行的按鈕操作。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="../_common/jquery-1.12.2.min.js"></script> 5 <script src="../_common/jquery.tmpl.min.js"></script> 6 </head> 7 <body> 8 <table id="list"> 9 <tr class="tableHead"> 10 <td>序號</td> 11 <td>名稱</td> 12 <td>代碼</td> 13 <td>類型</td> 14 </tr> 15 </table> 16 <script id="tmp" type="text/x-jquery-tmpl"> 17 <tr> 18 <td>${Number(id)+1}</td> 19 <td>${name}</td> 20 <td>${code}</td> 21 <td>${type}</td> 22 </tr> 23 </script> 24 <script type="text/javascript"> 25 $(document).ready(function () { 26 var list = [ 27 { id:"0", name: "javascript", code: "001", type: "web" }, 28 { id:"1", name: "asp.net", code: "004", type: "server" }, 29 { id:"2", name: "sql", code: "005", type: "db" } 30 ]; 31 $("#tmp").tmpl(list).appendTo("#list"); 32 }); 33 </script> 34 </body> 35 </html>
如上，如果要實現行序號，則需要在數據集合中加入一個屬性返回行號，這樣就會導致非常麻煩。當存在刪除或新增行時，若要刷新展示，還需要刷新數據的id屬性，不方便操作。其實如果能夠利用table的rowindex或者其他的方式，可以較好的利用dom屬性或數組index來處理，那就會方便很多了。
基於此思路，我們改造jquery.tmpl.js的tmpl函數。如下圖，對於未壓縮的插件源碼，處理如下：
為了避免數據集合中存在index對象，故特意加了一個$以作區分，使用時用$index屬性進行取值即可。
若是需要改造jquery.tmpl.min.js，由於做了代碼混淆，搜索map函數，第一個調用的地方按照如上邏輯調整即可。
調整后的調用方式：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="../_common/jquery-1.12.2.min.js"></script> 5 <script src="../_common/jquery.tmpl.min.js"></script> 6 </head> 7 <body> 8 <table id="list"> 9 <tr class="tableHead"> 10 <td>序號</td> 11 <td>名稱</td> 12 <td>代碼</td> 13 <td>類型</td> 14 </tr> 15 </table> 16 <script id="tmp" type="text/x-jquery-tmpl"> 17 <tr> 18 <td>${$index+1}</td> 19 <td>${name}</td> 20 <td>${code}</td> 21 <td>${type}</td> 22 </tr> 23 </script> 24 <script type="text/javascript"> 25 $(document).ready(function () { 26 var list = [ 27 { name: "javascript", code: "001", type: "web" }, 28 { name: "asp.net", code: "004", type: "server" }, 29 { name: "sql", code: "005", type: "db" } 30 ]; 31 $("#tmp").tmpl(list).appendTo("#list"); 32 }); 33 </script> 34 </body> 35 </html>
如上為新的調用方式，是不是方便了很多。