1. 程式人生 > >jQuery Template 上手體驗

jQuery Template 上手體驗

專案裡用到了jQuery template這個外掛,對我來說也算新鮮,學習記錄一下。 這裡使用的jQuery Template外掛是指:https://github.com/BorisMoore/jquery-tmpl 如果您使用過模版引擎,估計對此也不會陌生。這個外掛的用法其實很簡單,通過下面程式碼相信就可以明白用法:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> jQuery-template-demo</ title>
<script type=
"text/javascript" src= "../../js/jQuery/jquery-2.1.1.js"></script > <script type= "text/javascript" src= "../../js/jQuery/jquery.tmpl.min.js" ></script > <script type= "text/javascript"> var tempData = [{Name: "OneCoder",Blog: "http://www.coderli.com" }]; $(document).ready(function(){$("#template").tmpl(tempData).appendTo( "#list")}); </script>
<script id= "template" type="text/x-jquery-tmpl" > <li> <b>${Name}</b> (${Blog}) </li> </script> </head> <body> <ul id="list"></ ul> </body> </html>

依賴jQuery,解析JSON格式資料,替換模版中對應名稱的變數,然後寫到指定的位置。當然,該外掛還有更多的功能和用法,比如if判斷等,這裡不一一介紹。 不過,OneCoder確實體會到了有了該外掛後的便利。在需要動態生成html頁面的時候,不需要再在用js或者java拼湊html程式碼,不直觀,出錯還不容易除錯。用這個模版就方便多了。OneCoder前端弱見識短,說錯勿怪。