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

前言

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

          ・  简单直观

          ・  功能强大

          ・  可扩展的

          ・  快如闪电

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

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

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

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

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

     注意：本文不是基础入门教程，以下例子中自带注释，不做过多说明，读者自行体会，不懂的地方可以留言。

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

复制代码 代码如下:

 
 
  
    
    
    
  
  
    

      
        
          
            
            
            
          
        
        
        
      

序号	姓名	家庭成员

    

    
    
    
    
    
  
 

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

复制代码 代码如下:

 
 
  
    
    
    
  
  
    

      
        
          
            
            
            
          
        
        
        
      

序号	姓名	家庭成员

    

    
    
    
    
    
  
 

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

复制代码 代码如下:

 
 
  
    
    
    
  
  
    

      
        
          
            
            
          
        
        
        
      

名称	单价

    

    
    
    
    
    
  
 

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

复制代码 代码如下:

 
 
  
    
    
    
  
  
    

      
        
          
            
            
          
        
        
        
      

名称	单价

    

    
    
    
    
    
  
 

演示代码打包下载：http://xiazai.jb51.net/201412/yuanma/JsRender_Demo(jb51.net).rar