handlebars使用DEMO
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>handlebars_v2.0_demo</title> <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="js/handlebars-v2.0.0.js"></script> </head> <div id="demo"> </div> <script id="user-template" type="text/x-handlebars-template"> <h1>{{time}}</h1> {{#each user}} <p> {{#if name}} {{@index}}. 姓名:{{name}} 年龄:{{age}} 成年:{{Adult age}} {{#Compare age 18 }} 大于等于18岁 {{else}} 小于18岁 {{/Compare}} 记录时间:{{../../time}} {{/if}} </p> {{/each}} </script> <script> $(function(){ var data = { user:[{ name:"sky", age:28 },{ name:"json", age:10 },{ age:2 },{ name:"joy", age:18 }], time:"2014-12-26" } var myTemplate = Handlebars.compile($("#user-template").html()); Handlebars.registerHelper("Adult",function(age){return (age >= 18) ? "成年" : "未成年";}); Handlebars.registerHelper("Compare",function(i1,i2,options){if(i1>=i2) {return options.fn(this); }else {return options.inverse(this);}}); $("#demo").html(myTemplate(data)); }) </script> <div id="demo2"> </div> <script id="class-template" type="text/x-handlebars-template"> {{#each this}} <dl> <dt>{{class}} 共有{{group.count}}个小组 班长:{{student.[0].name}}</dt> {{#with student}} {{#each this}} <dd>{{name}}</dd> {{/each}} {{/with}} </dl> {{/each}} </script> <script> $(function(){ var data2 = [ { class:"一年级", student:[{ name:"王晓飞" },{ name:"陈扇" },{ name:"理查德" }], group:{ count:6 } }, { class:"二年级", student:[{ name:"朱暖" },{ name:"张坚庭" },{ name:"刘海得" }], group:{ count:8 } }] var myTemplate = Handlebars.compile($("#class-template").html()); $("#demo2").html(myTemplate(data2)); }) </script> <div id="demo3"> </div> <script id="class2-template" type="text/x-handlebars-template"> {{#each this}} <dl> <dt>{{class}}</dt> {{#with student}} {{#each this}} <dd>{{this}}</dd> {{/each}} {{/with}} </dl> {{/each}} </script> <script> $(function(){ var data2 = [ { class:"一年级", student:[ "王晓飞", "陈扇", "理查德" ] }, { class:"二年级", student:[ "朱暖", "张坚庭", "刘海得" ] }] var myTemplate = Handlebars.compile($("#class2-template").html()); $("#demo3").html(myTemplate(data2)); }) </script> <body> </body> </html>
点击下载: