您的位置：首页 > Web前端 > JavaScript

jsrender-for循环中访问父属性

2015-07-09 09:30 726 查看

jsrender中使用for循环数据时有时需要访问父级数据。

而jsrender在循环中的父级数据存放在隐藏属性parent.parent.data中，使用案例如下

{{:#parent.parent.data}}

具体使用案例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嵌套循环使用#parent访问父级数据 --- 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 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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航