首页 > 代码库 > JsRender系列demo(6)-无名
JsRender系列demo(6)-无名
<!DOCTYPE html><html><head> <script src="http://code.jquery.com/jquery.js" type="text/javascript"></script> <script src="http://www.mamicode.com/jsrender.js" type="text/javascript"></script> <link href="http://www.mamicode.com/resources/demos.css" rel="stylesheet" type="text/css" /> <link href="http://www.mamicode.com/resources/movielist.css" rel="stylesheet" type="text/css" /></head><body><a href="http://www.mamicode.com/demos.html">JsRender Demos</a><br /><h3>Template composition. Using external templates for block tags, such as {{for}} and {{if}}.</h3><script id="movieTemplate" type="text/x-jsrender"> <tr> <td>{{include tmpl="#headerTemplate"/}}</td> <td> {{for languages tmpl="#columnTemplate"/}} </td> <td> {{for languages tmpl=tmpl/}} </td> <td> {{for languages tmpl=‘#conditionalTemplate‘/}} </td> {{include tmpl="#sectionWrapperTemplate"}} {{>title}} {{/include}} <td> {{for languages tmpl=‘#indexWrapperTemplate‘}} <b>{{>name}}</b> {{/for}} </td> </tr></script><script id="headerTemplate" type="text/x-jsrender"> <td>{{>title}}</td></script><script id="sectionWrapperTemplate" type="text/x-jsrender"> <td>Section: <em>{{include tmpl=#content/}}</em></td></script><script id="columnTemplate" type="text/x-jsrender"> <div> <em>{{>name}}</em> </div></script><script id="rowTemplate" type="text/x-jsrender"> <span> <b>{{>name}}</b> </span></script><script id="conditionalTemplate" type="text/x-jsrender"> {{if name.charAt(0)===‘E‘ tmpl=‘#rowTemplate‘}} {{else tmpl=‘#columnTemplate‘}} {{/if}}</script><script id="indexWrapperTemplate" type="text/x-jsrender"> <div> {{:#index}}: {{include tmpl=#content/}} </div></script><table> <thead><tr><th>Synopsis</th><th>Fixed Template</th><th>Template specified in data</th><th>Conditional Template</th><th>Wrapper Template</th><th>Repeating Wrapper Template</th></tr></thead> <tbody id="movieList"></tbody></table><script type="text/javascript"> var movies = [ { title: "Meet Joe Black", languages: [ { name: "English" }, { name: "French" } ], tmpl: "#columnTemplate" }, { title: "Eyes Wide Shut", languages: [ { name: "French" }, { name: "Esperanto" }, { name: "Spanish" } ], tmpl: "#rowTemplate" }, { title: "The Inheritance", languages: [ { name: "English" }, { name: "German" } ], tmpl: "#columnTemplate" } ]; $( "#movieList" ).html( $( "#movieTemplate" ).render( movies ) );</script></body></html>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。