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>