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>
   
 

自訂標籤(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程式設計的學習有所幫助。