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

最新推荐文章于 2024-08-20 09:43:47 发布

gongxiaojiu

最新推荐文章于 2024-08-20 09:43:47 发布

阅读量308

点赞数

找了好几款基于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

 
         <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>