本文是一篇jsrender的实用入门教程，实例讲述了tag else使用、循环嵌套访问父级数据等知识点。分享给大家供大家参考。具体如下：
前言
JsRender是一款基于jQuery的JavaScript模版引擎，它具有如下特点：
· 简单直观
· 功能强大
立即学习“Java免费学习笔记（深入）”；
· 可扩展的
· 快如闪电
这些特性看起来很厉害，但几乎每个模版引擎，都会这么宣传。。。
由于工作需要，小菜才接触到此款模版引擎。使用了一段时间，发现它确实比较强大，但小菜觉得有些地方强大的过头了，反倒让人觉得很难理解。
另一方面，JsRender的官方文档比较详细，但其他资料出奇的少，遇到点什么问题，基本搜不到，不仅仅是相关问题搜不到，几乎就是没有结果。
再加上JsRender有些地方确实是不好理解，所以急需小菜分享一些“最佳实践”。
基于最近一段时间的使用，小菜总结了一些实用经验，当然，这些经验在官方文档上是找不到的。
PHP开发实用指南 2.0
下载
对于一个刚进入PHP 开发大门的程序员，最需要的就是一本实用的开发参考书，而不仅仅是各种快速入门的only hello wold。在开发的时候，也要注意到许多技巧和一些“潜规则”。PHP是一门很简单的脚本语言，但是用好它，也要下功夫的。同时，由于PHP 的特性，我一再强调，最NB 的PHP 程序员都不是搞PHP 的。为什么呢？因为PHP 作为一种胶水语言，用于粘合后端 数据库和前端页面，更多需
嵌套循环使用#parent访问父级数据（不推荐）
复制代码 代码如下:
| 序号 | 姓名 | 家庭成员 |
|---|
<script src="jquery.min.js"></script>
<script src="jsviews.js"></script>
<script id="testTmpl" type="text/x-jsrender"><br> <tr><br> <td>{{:#index + 1}}<br> <td>{{:name}}<br> <td><br> {{for family}}<br> {{!-- 利用#parent访问父级index --}}<br> <b>{{:#parent.parent.index + 1}}.{{:#index + 1}}<br> {{!-- 利用#parent访问父级数据，父级数据保存在data属性中 --}}<br> {{!-- #data相当于this --}}<br> {{:#parent.parent.data.name}}的{{:#data}}<br> {{/for}}<br> <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>
嵌套循环使用参数访问父级数据（推荐）
复制代码 代码如下:
| 序号 | 姓名 | 家庭成员 |
|---|
<script src="jquery.min.js"></script>
<script src="jsviews.js"></script>
<script id="testTmpl" type="text/x-jsrender"><br> <tr><br> <td>{{:#index + 1}}<br> <td>{{:name}}<br> <td><br> {{!-- 使用for循环时，可以在后边添加参数，参数必须以~开头，多个参数用空格分隔 --}}<br> {{!-- 通过参数，我们缓存了父级的数据，在子循环中通过访问参数，就可以间接访问父级数据 --}}<br> {{for family ~parentIndex=#index ~parentName=name}}<br> <b>{{:~parentIndex + 1}}.{{:#index + 1}}<br> {{!-- #data相当于this --}}<br> {{:~parentName}}的{{:#data}}<br> {{/for}}<br> <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 src="jquery.min.js"></script>
<script src="jsviews.js"></script>
<script id="testTmpl" type="text/x-jsrender"><br> <tr><br> <td>{{:name}}<br> <td><br> {{!-- isShow为自定义标签，price是传入的参数，status是附加属性 --}}<br> {{isShow price status=0}}<br> {{:price}}<br> {{else price status=1}}<br> --<br> {{/isShow}}<br> <br> <br> </script>
<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 src="jquery.min.js"></script>
<script src="jsviews.js"></script>
<script id="testTmpl" type="text/x-jsrender"><br> <tr><br> <td>{{:name}}<br> <td><br> {{!-- 利用原生的if做分支跳转，利用helper做逻辑处理 --}}<br> {{if ~isShow(price)}}<br> {{:price}}<br> {{else}}<br> --<br> {{/if}}<br> <br> <br> </script>
<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程序设计的学习有所帮助。
