JsRender是一款基于jQuery的JavaScript模版引擎，它具有如下特点：
· 简单直观
· 功能强大
· 可扩展的
· 快如闪电
这些特性看起来很厉害，但几乎每个模版引擎，都会这么宣传。。。
由于工作需要，小菜才接触到此款模版引擎。使用了一段时间，发现它确实比较强大，但小菜觉得有些地方强大的过头了，反倒让人觉得很难理解。
另一方面，JsRender的官方文档比较详细，但其他资料出奇的少，遇到点什么问题，基本搜不到，不仅仅是相关问题搜不到，几乎就是没有结果。
再加上JsRender有些地方确实是不好理解，所以急需小菜分享一些“最佳实践”。
基于最近一段时间的使用，小菜总结了一些实用经验，当然，这些经验在官方文档上是找不到的。
注意：本文不是基础入门教程，以下例子中自带注释，不做过多说明，读者自行体会，不懂的地方可以留言。
嵌套循环使用#parent访问父级数据（不推荐）
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嵌套循环使用#parent访问父级数据 --- by 杨元</title>
<style>
</style>
</head>
<body>
<div>
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>家庭成员</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script src="https://www.jb51.net/jquery.min.js"></script>
<script src="https://www.jb51.net/jsviews.js"></script>
<!-- 定义JsRender模版 -->
<script type="text/x-jsrender">
<tr>
<td>{{:#index + 1}}</td>
<td>{{:name}}</td>
<td>
{{for family}}
{{!-- 利用#parent访问父级index --}}
<b>{{:#parent.parent.index + 1}}.{{:#index + 1}}</b>
{{!-- 利用#parent访问父级数据，父级数据保存在data属性中 --}}
{{!-- #data相当于this --}}
{{:#parent.parent.data.name}}的{{:#data}}
{{/for}}
</td>
</tr>
</script>
<script>
//数据源
var dataSrouce = [{
name: "张三",
family: [
"爸爸",
"妈妈",
"哥哥"
]
},{
name: "李四",
family: [
"爷爷",
"奶奶",
"叔叔"
]
}];
//渲染数据
var html = $("#testTmpl").render(dataSrouce);
$("#list").append(html);
</script>
</body>
</html>
嵌套循环使用参数访问父级数据（推荐）
复制代码 代码如下: