jsrender提供多重循环方式
1.{{for array}}循环数组
2.{{props object}}循环对象
1.for array的使用
<body> <div id="result"></div> <script id="theTmpl" type="text/x-jsrender">
<b>{{:title}}</b>
<ul>
{{for members}}
<li>{{:name}} lives in <b>{{:address.city}}</b></li>
{{/for}}
</ul>
</script> <script>
var data = {
"title": "The A team",
"members": [
{
"name": "Pete",
"address": {
"city": "Seattle"
}
},
{
"name": "Heidi",
"address": {
"city": "Sidney"
}
}
]
}; var template = $.templates("#theTmpl"); var htmlOutput = template.render(data); $("#result").html(htmlOutput);
</script> </body>
2.props object的使用
循环object中的所有属性
<body> <div id="result"></div> <script id="theTmpl" type="text/x-jsrender">
<table><tbody>
<tr><td><b>name:</b> {{:name}}</td></tr>
<tr><td>
{{props address}}
<b>{{>key}}:</b> {{>prop}}<br/>
{{/props}}
</td></tr>
</tbody></table>
</script> <script>
var data = [
{
"name": "Pete",
"address": {
"street": "12 Pike Place",
"city": "Seattle",
"ZIP": "98101"
}
},
{
"name": "Heidi",
"address": {
"street": "5000 Broadway",
"city": "Sidney",
"country": "Australia"
}
}
]; var template = $.templates("#theTmpl"); var htmlOutput = template.render(data); $("#result").html(htmlOutput);
</script> </body>