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

jsrender for 标签

2015-06-13 15:19 751 查看

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>

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

标签：

相关文章推荐

新的分享

章节导航