首頁 > 開發者 > JavaScript
標籤：for迴圈 type ges 下一代 end images charset 前端 render
最近在參與整合前端的架構，我們知道javascript最強大的模板引擎之一當屬jsrender，號稱下一代jquery模板引擎的標準實現。
通常在模板merge的過程中，我們會遇到兩次乃至三級嵌套的情形，強大的jsrender自然會支援，如下所示：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script type="text/javascript" src="jquery-1.11.1.min.js"></script> <script type="text/javascript" src="jsrender.js"></script> <title>jsrender nest demo</title></head><body><div id="studentList">abc</div><script type="text/x-jsrender" id="studentTemplate"> {{for #data}} <h3>{{:name}}</h3> <ul> {{for language}} <li> {{:#parent.parent.data.name}} is learning {{:title}}<br/> {{for scores}} <a href="#">{{:score}}</a> {{/for}} </li> {{/for}} </ul> {{/for}}</script><script type="text/javascript"> var students = [{name:"張三",language:[{title:"中",scores:[{score:12},{score:13},{score:14}]},{title:"英",scores:[{score:12},{score:13},{score:14}]},{title:"數",scores:[{score:12},{score:13},{score:14}]}]}, {name:"李四",language:[{title:"中",scores:[{score:12},{score:13},{score:14}]},{title:"中",scores:[{score:12},{score:13},{score:14}]},{title:"中",scores:[{score:12},{score:13},{score:14}]}]}, {name:"王五",language:[{title:"中",scores:[{score:12},{score:13},{score:14}]},{title:"中",scores:[{score:12},{score:13},{score:14}]},{title:"中",scores:[{score:12},{score:13},{score:14}]}]}]; $("#studentList").html($("#studentTemplate").render(students));</script></body></html>
效果如下：
javascript模板庫jsrender for迴圈嵌套樣本
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
