JsRender实用入门教程_javascript技巧

本文是一篇JsRender的实用入门教程，实例讲述了tag else使用、循环嵌套访问父级数据等知识点。分享给大家供大家参考。具体如下：

前言

JsRender是一款基于jQuery的JavaScript模版引擎，它具有如下特点：

  ·  简单直观

  ·  功能强大

  ·  可扩展的

  ·  快如闪电

这些特性看起来很厉害，但几乎每个模版引擎，都会这么宣传。。。

由于工作需要，小菜才接触到此款模版引擎。使用了一段时间，发现它确实比较强大，但小菜觉得有些地方强大的过头了，反倒让人觉得很难理解。

另一方面，JsRender的官方文档比较详细，但其他资料出奇的少，遇到点什么问题，基本搜不到，不仅仅是相关问题搜不到，几乎就是没有结果。

再加上JsRender有些地方确实是不好理解，所以急需小菜分享一些“最佳实践”。

基于最近一段时间的使用，小菜总结了一些实用经验，当然，这些经验在官方文档上是找不到的。

嵌套循环使用#parent访问父级数据（不推荐）

复制代码 代码如下:

 
   
   
   
   
 
 
   
   

     
       
         
           
           
           
         
       
       
         
       
     

序号	姓名	家庭成员

   

   
   
   
   
   
   
   
    <script><br /> //数据源<br /> var dataSrouce = [{<br /> name: "张三",<br /> family: [<br /> "爸爸",<br /> "妈妈",<br /> "哥哥"<br /> ]<br /> },{<br /> name: "李四",<br /> family: [<br /> "爷爷",<br /> "奶奶",<br /> "叔叔"<br /> ]<br /> }];<br /> <br /> //渲染数据<br /> var html = $("#testTmpl").render(dataSrouce);<br /> $("#list").append(html);<br /> <br /> </script>
   
 

嵌套循环使用参数访问父级数据（推荐）

复制代码 代码如下:

 
   
   
   
   
 
 
   
   

     
       
         
           
           
           
         
       
       
         
       
     

序号	姓名	家庭成员

   

   
   
   
   
   
   
   
    <script><br /> //数据源<br /> var dataSrouce = [{<br /> name: "张三",<br /> family: [<br /> "爸爸",<br /> "妈妈",<br /> "哥哥"<br /> ]<br /> },{<br /> name: "李四",<br /> family: [<br /> "爷爷",<br /> "奶奶",<br /> "叔叔"<br /> ]<br /> }];<br /> <br /> //渲染数据<br /> var html = $("#testTmpl").render(dataSrouce);<br /> $("#list").append(html);<br /> <br /> </script>
   
 

自定义标签(custom tag)中使用else（强烈不推荐）

复制代码 代码如下:

 
   
   
   
   
 
 
   
   

     
       
         
           
           
         
       
       
         
       
     

名称	单价

   

   
   
   
   
   
   
   
    <script><br /> //数据源<br /> var dataSrouce = [{<br /> name: "苹果",<br /> price: 108<br /> },{<br /> name: "鸭梨",<br /> price: 370<br /> },{<br /> name: "桃子",<br /> price: 99<br /> },{<br /> name: "菠萝",<br /> price: 371<br /> },{<br /> name: "橘子",<br /> price: 153<br /> }];<br /> <br /> //自定义标签<br /> $.views.tags({<br /> "isShow": function(price){<br /> var temp=price+''.split('');<br /> <br /> if(this.tagCtx.props.status === 0){<br /> //判断价格是否为水仙花数，如果是，则显示，否则不显示<br /> if(price==(Math.pow(parseInt(temp[0],10),3)+Math.pow(parseInt(temp[1],10),3)+Math.pow(parseInt(temp[2],10),3))){<br /> return this.tagCtxs[0].render();<br /> }else{<br /> return this.tagCtxs[1].render();<br /> }<br /> }else{<br /> return "";<br /> }<br /> <br /> }<br /> });<br /> <p> //渲染数据<br /> var html = $("#testTmpl").render(dataSrouce);<br /> $("#list").append(html);<br /> <br /> </script>
   
 

用helper代替自定义标签（推荐）

复制代码 代码如下:

 
   
   
   
   
 
 
   
   

     
       
         
           
           
         
       
       
         
       
     

名称	单价

   

   
   
   
   
   
   
   
    <script><br /> //数据源<br /> var dataSrouce = [{<br /> name: "苹果",<br /> price: 108<br /> },{<br /> name: "鸭梨",<br /> price: 370<br /> },{<br /> name: "桃子",<br /> price: 99<br /> },{<br /> name: "菠萝",<br /> price: 371<br /> },{<br /> name: "橘子",<br /> price: 153<br /> }];<br /> <br /> //Helper<br /> $.views.helpers({<br /> "isShow": function(price){<br /> var temp=price+''.split('');<br /> if(price==(Math.pow(parseInt(temp[0],10),3)+Math.pow(parseInt(temp[1],10),3)+Math.pow(parseInt(temp[2],10),3))){<br /> return true;<br /> }else{<br /> return false;<br /> }<br /> }<br /> }); <p> //渲染数据<br /> var html = $("#testTmpl").render(dataSrouce);<br /> $("#list").append(html);<br /> <br /> </script>
   
 

完整实例代码点击此处本站下载。

希望本文所述对大家JsRender程序设计的学习有所帮助。