jsRender 循环for 和props

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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>