handlebar基本使用

末蓝、 2022-06-01 23:37 148阅读 0赞

*  each

<!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <title>each-基本循环使用方法 - by 杨元</title> </head> <body> <h1>each-基本循环使用方法</h1>  <table> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody id="tableList"> </tbody> </table>  <script type="text/javascript" src="script/jquery.js"></script> <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>    <script id="table-template" type="text/x-handlebars-template"> { { #each student}} <tr> <td>{ { name}}</td> <td>{ { sex}}</td> <td>{ { age}}</td> </tr> { { /each}} </script>  <script type="text/javascript"> $(document).ready(function() { //模拟的json对象 var data = { "student": [ { "name": "张三", "sex": "0", "age": 18 }, { "name": "李四", "sex": "0", "age": 22 }, { "name": "妞妞", "sex": "1", "age": 18 } ] }; //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架 //$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。 var myTemplate = Handlebars.compile($("#table-template").html()); //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。 $('#tableList').html(myTemplate(data)); }); </script> </body> </html>

1.  each-this

<!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <title>each-循环中使用this - by 杨元</title> </head> <body> <h1>each-循环中使用this</h1>  <table> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody id="tableList"> </tbody> </table>  <script type="text/javascript" src="script/jquery.js"></script> <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>    <script id="table-template" type="text/x-handlebars-template"> { { #each this}} <tr> <td>{ { name}}</td> <td>{ { sex}}</td> <td>{ { age}}</td> </tr> <tr> <td><input type="text" value="{ { name}}"></td> <td><input type="text" value="{ { sex}}"></td> <td><input type="text" value="{ { age}}"></td> </tr> { { /each}} </script>  <script type="text/javascript"> $(document).ready(function () { //模拟的json对象 var data = [ { "name": "张三", "sex": "0", "age": 18 }, { "name": "李四", "sex": "0", "age": 22 }, { "name": "妞妞", "sex": "1", "age": 18 } ]; //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架 //$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。 var myTemplate = Handlebars.compile($("#table-template").html()); //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。 $('#tableList').html(myTemplate(data)); }); </script> </body> </html>

*  escape

<!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <title>关于HTML编码 - by 杨元</title> </head> <body> <h1>关于HTML编码</h1>  <table> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>个人主页</th> </tr> </thead> <tbody id="tableList"> </tbody> </table>  <script type="text/javascript" src="script/jquery.js"></script> <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>    <script id="table-template" type="text/x-handlebars-template"> { { #each student}} <tr> <td>{ { name}}</td> <td>{ { sex}}</td> <td>{ { age}}</td> <td>{ { homePage}}</td> <td>{ { { homePage}}}~~~~~~~~~</td> { { #compare age 20}} <td>{ { homePage}}</td> { { else}} <td>{ { { homePage}}}</td> { { /compare}} </tr> { { /each}} </script>  <script type="text/javascript"> $(document).ready(function () { //模拟的json对象 var data = { "student": [ { "name": "张三", "sex": "0", "age": 18, "homePage": "<a href='javascript:void(0);'>张三的个人主页</a>" }, { "name": "李四", "sex": "0", "age": 22, "homePage": "<a href='javascript:void(0);'>李四的个人主页</a>" }, { "name": "妞妞", "sex": "1", "age": 19, "homePage": "<a href='javascript:void(0);'>妞妞的个人主页</a>" } ] }; //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架 //$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。 var myTemplate = Handlebars.compile($("#table-template").html()); //注册一个比较数字大小的Helper,有options参数，块级Helper Handlebars.registerHelper("compare", function (v1, v2, options) { //判断v1是否比v2大 if (v1 > v2) { //继续执行 return options.fn(this); } else { //执行else部分 return options.inverse(this); } }); //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。 $('#tableList').html(myTemplate(data)); }); </script> </body> </html>

*  if

<!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <title>if-判断的基本用法 - by 杨元</title> </head> <body> <h1>if-判断的基本用法</h1>  <table> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody id="tableList"> </tbody> </table>  <script type="text/javascript" src="script/jquery.js"></script> <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>    <script id="table-template" type="text/x-handlebars-template"> { { #each student}} { { #if name}} <tr> <td>{ { name}}</td> <td>{ { sex}}</td> <td>{ { age}}</td> </tr> { { /if}} { { /each}} </script>  <script type="text/javascript"> $(document).ready(function() { //模拟的json对象 var data = { "student": [ { "name": "张三", "sex": "0", "age": 18 }, { "sex": "0", "age": 22 }, { "name": "妞妞", "sex": "1", "age": 18 } ] }; //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架 //$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。 var myTemplate = Handlebars.compile($("#table-template").html()); //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。 $('#tableList').html(myTemplate(data)); }); </script> </body> </html>

*  if-helper-compare

<!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <title>由于if功力不足引出的Helper - by 杨元</title> </head> <body> <h1>由于if功力不足引出的Helper</h1>  <table> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody id="tableList"> </tbody> </table>  <script type="text/javascript" src="script/jquery.js"></script> <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>    <script id="table-template" type="text/x-handlebars-template"> { { #each student}} { { #if name}} { { #compare age 20}} <tr> <td>{ { name}}</td> <td>{ { sex}}</td> <td>{ { age}}</td> </tr> { { else}} <tr> <td>?</td> <td>?</td> <td>?</td> </tr> { { /compare}} { { /if}} { { /each}} </script>  <script type="text/javascript"> $(document).ready(function() { //模拟的json对象 var data = { "student": [ { "name": "张三", "sex": "0", "age": 23 }, { "sex": "0", "age": 22 }, { "name": "妞妞", "sex": "1", "age": 18 } ] }; //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架 //$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。 var myTemplate = Handlebars.compile($("#table-template").html()); //注册一个比较大小的Helper,判断v1是否大于v2 Handlebars.registerHelper("compare",function(v1,v2,options){ if(v1>v2){ //满足添加继续执行 return options.fn(this); }else{ //不满足条件执行{ { else}}部分 return options.inverse(this); } }); //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。 $('#tableList').html(myTemplate(data)); }); </script> </body> </html>

*  if-helper-transformat

<!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <title>另一种Helper用法 - by 杨元</title> </head> <body> <h1>另一种Helper用法</h1>  <table> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody id="tableList"> </tbody> </table>  <script type="text/javascript" src="script/jquery.js"></script> <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>    <script id="table-template" type="text/x-handlebars-template"> { { #each student}} { { #if name}} { { #compare age 20}} <tr> <td>{ { name}}</td> <td>{ { transformat sex}}</td> <td>{ { age}}</td> </tr> { { else}} <tr> <td>?</td> <td>?</td> <td>?</td> </tr> { { /compare}} { { /if}} { { /each}} </script>  <script type="text/javascript"> $(document).ready(function() { //模拟的json对象 var data = { "student": [ { "name": "张三", "sex": "0", "age": 23 }, { "name": "李四", "sex": "0", "age": 18 }, { "name": "妞妞", "sex": "1", "age": 21 } ] }; //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架 //$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。 var myTemplate = Handlebars.compile($("#table-template").html()); //注册一个比较大小的Helper,判断v1是否大于v2 Handlebars.registerHelper("compare",function(v1,v2,options){ if(v1>v2){ //满足添加继续执行 return options.fn(this); }else{ //不满足条件执行{ { else}}部分 return options.inverse(this); } }); //注册一个翻译用的Helper，0翻译成男，1翻译成女 Handlebars.registerHelper("transformat",function(value){ if(value==0){ return "男"; }else if(value==1){ return "女"; } }); //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。 $('#tableList').html(myTemplate(data)); }); </script> </body> </html>

*  with

<!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <title>with-进入到某个属性(进入到某个上下文环境) - by 杨元</title> </head> <body> <h1>with-进入到某个属性(进入到某个上下文环境)</h1>  <table> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>兴趣爱好</th> </tr> </thead> <tbody id="tableList"> </tbody> </table>  <script type="text/javascript" src="script/jquery.js"></script> <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>    <script id="table-template" type="text/x-handlebars-template"> { { #each this}} <tr> <td>{ { name}}</td> <td>{ { sex}}</td> <td>{ { age}}</td> <td> { { #with favorite}} { { #each this}} <p>{ { name}}</p> { { /each}} { { /with}} </td> </tr> { { /each}} </script>  <script type="text/javascript"> $(document).ready(function() { //模拟的json对象 var data = [ { "name": "张三", "sex": "0", "age": 18, "favorite": [ { "name":"唱歌" },{ "name":"篮球" } ] }, { "name": "李四", "sex": "0", "age": 22, "favorite": [ { "name":"上网" },{ "name":"足球" } ] }, { "name": "妞妞", "sex": "1", "age": 18, "favorite": [ { "name":"电影" },{ "name":"旅游" } ] } ]; //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架 //$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。 var myTemplate = Handlebars.compile($("#table-template").html()); //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。 $('#tableList').html(myTemplate(data)); }); </script> </body> </html>

*  with-this

<!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <title>with-终极this应用 - by 杨元</title> </head> <body> <h1>with-终极this应用</h1>  <table> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>兴趣爱好</th> </tr> </thead> <tbody id="tableList"> </tbody> </table>  <script type="text/javascript" src="script/jquery.js"></script> <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>    <script id="table-template" type="text/x-handlebars-template"> { { #each this}} <tr> <td>{ { name}}</td> <td>{ { sex}}</td> <td>{ { age}}</td> <td> { { #with favorite}} { { #each this}} <p>{ { this}}</p> { { /each}} { { /with}} </td> </tr> { { /each}} </script>  <script type="text/javascript"> $(document).ready(function () { //模拟的json对象 var data = [ { "name": "张三", "sex": "0", "age": 18, "favorite": [ "唱歌", "篮球" ] }, { "name": "李四", "sex": "0", "age": 22, "favorite": [ "上网", "足球" ] }, { "name": "妞妞", "sex": "1", "age": 18, "favorite": [ "电影", "旅游" ] } ]; //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架 //$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。 var myTemplate = Handlebars.compile($("#table-template").html()); //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。 $('#tableList').html(myTemplate(data)); }); </script> </body> </html>