基於jQuery的JavaScript模版引擎JsRender使用指南_jquery

前言

     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 />        var html = $("#testTmpl").render(dataSrouce);<br />        $("#list").append(html);<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 />        $.views.tags({<br />          "isShow": function(price){<br />            var temp=price ''.split('');<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 />        var html = $("#testTmpl").render(dataSrouce);<br />        $("#list").append(html);<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 />        //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 />        });<br />        //渲染資料<br />        var html = $("#testTmpl").render(dataSrouce);<br />        $("#list").append(html);<br />      </script>
  
 

示範程式碼打包下載：http://xiazai.jb51.net/201412/yuanma/JsRender_Demo(jb51.net).rar