找了好几款基于 jquery 的模板渲染插件,无一感觉很难用 (教程较少、绑定不统一),也可能我智商问题,比如 jquery template.js 、jtemplate.js。
然后在 github 上找到这一款,和我在公司之前用的差不多 (apicloud 云端开发 app,致敬【百小僧】大神封装的 HUI,简化了在公司很多工作),
这款模板渲染和 HUI 的很相似,也比较简单 基于 jquery 的模板渲染插件。
附上 github https://github.com/yanhaijing/template.js
特性
1、引入 jquery 文件与 template.js
- <script src="template.js"></script>
2、构建模板
- <script id="tpl" type="text/html">
- <ul>
- <!--这里使用了if判断-->
- <%if(list.length > 0 ){%>
- <!--这里使用了for循环,看起来和js写法是差不多的,注意占位符-->
- <%for(var i = 0; i < list.length; i++) {%>
- <li><%:=list[i].name%></li>
- <%}%>
- <%}else{%>
- <li>没有数据233333~~~ <li>
- <%}%>
- <%%>
- </ul>
- </script>
3、模板渲染 (模板内对象是什么,就传什么。{list:[] } 传一个对象里面有一个 list 数组 )
- <script>
- //第一种方法
- var tpl = document.getElementById('tpl').innerHTML;
- var html = template(tpl, {
- list: [{
- name: "yan"
- },
- {
- name: "haijing"
- }]
- });
- console.log(html);
- //第二种方法 感觉第二种好用些
- tpl = template(document.getElementById('tpl').innerHTML);
- html = tpl({
- list: []
- });
- console.log(html);
- </script>
4、输出
- <ul>
- <li>
- yan
- </li>
- <li>
- haijing
- </li>
- </ul>
- <ul>
- <li>
- 没有数据233333~~~
- </li>
- </ul>
5、其他用法 (定义变量)
- <!--这里看起来和js差不多了,简单易懂。-->
- <%var test = '输出自定义变量';%>
以上就是这么多了,欢迎指导补充。
for 循环、if 判断和 js 差不多,用起来很舒服。
使用模板也是为了减少直接在 js 中拼接代码,简化开发,代码可读性很好
向这个模板 js 的开发者的致敬,再次放上 github https://github.com/yanhaijing/template.js
来源: http://www.cnblogs.com/yZDn/p/7062313.html