出位的template.js 基于jquery的模板渲染插件,简单、好用

找了好几款基于jquery的模板渲染插件，无一感觉很难用(教程较少、绑定不统一)，也可能我智商问题，比如jquery template.js 、jtemplate.js。

然后在github上找到这一款，和我在公司之前用的差不多(apicloud云端开发app，致敬【百小僧】大神封装的HUI，简化了在公司很多工作)，  

这款模板渲染和HUI的很相似，也比较简单  基于jquery的模板渲染插件。

附上github https://github.com/yanhaijing/template.js 

特性

• 模版编译，渲染
• 支持所有主流浏览器及Node（UMD）
• JavaScript原生语法
• 丰富的自定义配置
• 支持数据过滤
• 异常捕获功能
• 功能专一，简单好用

兼容性

• Node 0.10+
• Safari 6+ (Mac)
• iOS 5+ Safari
• Chrome 23+ (Windows, Mac, Android, iOS, Linux, Chrome OS)
• Firefox 4+ (Windows, Mac, Android, Linux, Firefox OS)
• Internet Explorer 6+ (Windows, Windows Phone)
• Opera 10+ (Windows, linux, Android)

传统用法(其他用法请在github找)https://github.com/yanhaijing/template.js

1、引入 jquery文件与 template.js

1	<script src= "template.js" ></script>

2、构建模板

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<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数组 )

1 2 3 4 5 6 7 8 9 10

<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、输出

1 2 3 4 5 6 7

<ul>      <li>yan</li>      <li>haijing</li> </ul> <ul>      <li>没有数据233333~~~</li> </ul>

　　

5、其他用法(定义变量)

1 2	<!--这里看起来和js差不多了，简单易懂。--> <% var test = '输出自定义变量' ;%>