jQuery Template 上手體驗
阿新 • • 發佈:2018-12-23
專案裡用到了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前端弱見識短,說錯勿怪。