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>