jQuery Template 上手体验

发表于 2014/10/21

作者 OneCoder

次浏览 1 分钟阅读

项目里用到了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前端弱见识短，说错勿怪。

所有代码已上传至Github：https://github.com/lihongzheshuai/yummy-code
GESP 学习专题站：GESP WIKI
"luogu-"系列题目可在洛谷题库进行在线评测。
"bcqm-"系列题目可在编程启蒙题库进行在线评测。

欢迎加入：Java、C++、Python技术交流QQ群(982860385)，大佬免费带队，有问必答
欢迎加入：C++ GESP/CSP认证学习QQ频道，考试资源总结汇总
欢迎加入：C++ GESP/CSP学习交流QQ群(688906745)，考试认证学员交流，互帮互助

GESP/CSP 认证学习微信公众号

知识扩展

jQuery

本文由作者按照 CC BY-NC-SA 4.0 进行授权

热门标签