JsRender实用入门教程

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

前言

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

  ・  简单直观

  ・  功能强大

  ・  可扩展的

  ・  快如闪电

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

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

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

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

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

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

复制代码 代码如下:


 
   
    嵌套循环使用#parent访问父级数据 --- by 杨元
   
   
 
 
   
   

     
       
         
           
           
           
         
       
       
         
       
     
序号 姓名 家庭成员

   

   
   
   
   
   
   
   
   
   
 

嵌套循环使用参数访问父级数据(推荐)

复制代码 代码如下:



 
   
    嵌套循环使用参数访问父级数据 --- by 杨元
   
   
 
 
   
   

     
       
         
           
           
           
         
       
       
         
       
     
序号 姓名 家庭成员

   

   
   
   
   
   
   
   
   
   
 

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

复制代码 代码如下:



 
   
    自定义标签中使用else --- by 杨元
   
   
 
 
   
   

     
       
         
           
           
         
       
       
         
       
     
名称 单价

   

   
   
   
   
   
   
   
   
   
 

用helper代替自定义标签(推荐)

复制代码 代码如下:



 
   
    用helper代替自定义标签 --- by 杨元
   
   
 
 
   
   

     
       
         
           
           
         
       
       
         
       
     
名称 单价

   

   
   
   
   
   
   
   
   
   
 

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

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

你可能感兴趣的:(JsRender实用入门教程)