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>
知识只有共享才能传播,才能推崇出新的知识,才能学到更多,这里写的每一篇文字/博客,基本都是从网上查询了一下资料然后记录下来,也有些是原滋原味搬了过来,也有时加了一些自己的想法