JsRender实用入门教程(2)
复制代码 代码如下: !DOCTYPE html html head meta charset="utf-8" title嵌套循环使用参数访问父级数据 --- by 杨元/title style /style /head body div table thead tr th width="10%"序号
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嵌套循环使用参数访问父级数据 --- by 杨元</title>
<style>
</style>
</head>
<body>
<div>
<table>
<thead>
<tr>
<th width="10%">序号</th>
<th width="10%">姓名</th>
<th width="80%">家庭成员</th>
</tr>
</thead>
<tbody id="list">
</tbody>
</table>
</div>
<script src="jquery.min.js"></script>
<script src="jsviews.js"></script>
<!-- 定义JsRender模版 -->
<script id="testTmpl" type="text/x-jsrender">
<tr>
<td>{{:#index + 1}}</td>
<td>{{:name}}</td>
<td>
{{!-- 使用for循环时，可以在后边添加参数，参数必须以~开头，多个参数用空格分隔 --}}
{{!-- 通过参数，我们缓存了父级的数据，在子循环中通过访问参数，就可以间接访问父级数据 --}}
{{for family ~parentIndex=#index ~parentName=name}}
<b>{{:~parentIndex + 1}}.{{:#index + 1}}</b>
{{!-- #data相当于this --}}
{{:~parentName}}的{{:#data}}
{{/for}}
</td>
</tr>
</script>
<script>
//数据源
var dataSrouce = [{
name: "张三",
family: [
"爸爸",
"妈妈",
"哥哥"
]
},{
name: "李四",
family: [
"爷爷",
"奶奶",
"叔叔"
]
}];
//渲染数据
var html = $("#testTmpl").render(dataSrouce);
$("#list").append(html);
</script>
</body>
</html>
自定义标签(custom tag)中使用else（强烈不推荐）
精彩图集
精彩文章