for object使用
1.为进入object中直接使用其中的属性
<div id="result"></div>
<script id="theTmpl" type="text/x-jsrender">
<div>
{{:name}} lives in
{{for address}}
<b>{{>city}}</b>
{{/for}}
</div>
</script>
<script>
var data = [
{
"name": "Pete",
"address": {
"city": "Seattle"
}
},
{
"name": "Heidi",
"address": {
"city": "Sidney"
}
}
];
var template = $.templates("#theTmpl");
var htmlOutput = template.render(data);
$("#result").html(htmlOutput);
</script>
2.切入模版
<body>
<script id="peopleTemplate" type="text/x-jsrender">
<div>
{{:name}} lives in {{for address tmpl="#addressTemplate" /}}<!--切入其他模版-->
</div>
</script>
<script id="addressTemplate" type="text/x-jsrender">
<b>{{>city}}</b>
</script>
<div id="result"></div>
<script>
var people = [
{
"name": "Pete",
"address": {
"city": "Seattle"
}
},
{
"name": "Heidi",
"address": {
"city": "Sidney"
}
}
];
var html = $("#peopleTemplate").render(people);
$("#result").html(html);
</script>
</body>
2.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>
3.for标签还支持else的判断
else：表示for中的没有值循环或者为空，则进入
{{for members}}
Name: {{:name}}
{{else}}
No members...
{{/for}}
Conditional blocks: — Render the block content of the {{for}} tag (or referenced template) if the object is defined and is not an empty array, otherwise render the {{else}} block (or template)
<body>
<div id="result"></div>
<script id="theTmpl" type="text/x-jsrender">
<b>{{:title}}</b>
<ul>
{{for members}}
<li><b>Name:</b> {{:name}}</li>
{{else}}
<li>No members!</li>
{{/for}}
</ul>
</script>
<script>
var data = [
{
"title": "The A team",
"members": []
},
{
"title": "The B team",
"members": [
{
"name": "Pete"
}
]
}
];
var template = $.templates("#theTmpl");
var htmlOutput = template.render(data);
$("#result").html(htmlOutput);
</script>
</body>
时间： 2024-10-13 22:31:45