前端录网站,记录前端点点滴滴,帮助程序猿快速成长!

js模版引擎handlebars.js实用教程——另一种Helper用法

js
返回目录

 

  1 <!DOCTYPE html>
  2 <html>
  3   <head>
  4     <META http-equiv=Content-Type content="text/html; charset=utf-8">
  5     <title>另一种Helper用法</title>
  6   </head>
  7   <body>
  8     <h1>另一种Helper用法</h1>
  9     <!--基础html框架-->
 10     <table>
 11       <thead>
 12         <tr>
 13           <th>姓名</th>
 14           <th>性别</th>
 15           <th>年龄</th>
 16         </tr>
 17       </thead>
 18       <tbody id="tableList">
 19         
 20       </tbody>
 21     </table>
 22     
 23     <!--插件引用-->
 24     <script type="text/javascript" src="script/jquery.js"></script>
 25     <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>
 26     
 27     <!--Handlebars.js模版-->
 28     <!--Handlebars.js模版放在script标签中,保留了html原有层次结构,模版中要写一些操作语句-->
 29     <!--id可以用来唯一确定一个模版,type是模版固定的写法-->
 30     <script id="table-template" type="text/x-handlebars-template">
 31       {{#each student}}
 32         {{#if name}}
 33           {{#compare age 20}}
 34             <tr>
 35               <td>{{name}}</td>
 36               <td>{{transformat sex}}</td>
 37               <td>{{age}}</td>
 38             </tr>
 39           {{else}}
 40             <tr>
 41               <td>?</td>
 42               <td>?</td>
 43               <td>?</td>
 44             </tr>
 45           {{/compare}}
 46         {{/if}}
 47       {{/each}}
 48     </script>
 49     
 50     <!--进行数据处理、html构造-->
 51     <script type="text/javascript">
 52       $(document).ready(function() {
 53         //模拟的json对象
 54         var data = {
 55                     "student": [
 56                         {
 57                             "name": "张三",
 58                             "sex": "0",
 59                             "age": 23
 60                         },
 61                         {
 62                             "name": "李四",
 63                             "sex": "0",
 64                             "age": 18
 65                         },
 66                         {
 67                             "name": "妞妞",
 68                             "sex": "1",
 69                             "age": 21
 70                         }
 71                     ]
 72                 };
 73         
 74         //注册一个Handlebars模版,通过id找到某一个模版,获取模版的html框架
 75         //$("#table-template").html()是jquery的语法,不懂的童鞋请恶补。。。
 76         var myTemplate = Handlebars.compile($("#table-template").html());
 77         
 78         //注册一个比较大小的Helper,判断v1是否大于v2
 79         Handlebars.registerHelper("compare",function(v1,v2,options){
 80           if(v1>v2){
 81             //满足添加继续执行
 82             return options.fn(this);
 83           }else{
 84             //不满足条件执行{{else}}部分
 85             return options.inverse(this);
 86           }
 87         });
 88         
 89         //注册一个翻译用的Helper,0翻译成男,1翻译成女
 90         Handlebars.registerHelper("transformat",function(value){
 91           if(value==0){
 92             return "";
 93           }else if(value==1){
 94             return "";
 95           }
 96         });
 97         
 98         //将json对象用刚刚注册的Handlebars模版封装,得到最终的html,插入到基础table中。
 99         $('#tableList').html(myTemplate(data));
100       });
101     </script>
102   </body>
103 </html>

         小菜刚刚提到过,带options参数的Helper是块级别的,而不带的,相当于行内级别的Helper。

         从例子一开始,性别就是用0、1代码表示的,但实际情况下我们需要转换成汉字,transformat这个Helper需要一个参数,根据不同的代码,返回男女,这样调用{{transformat sex}},其中sex是从当前上下文中读取的性别代码。



转载请注明:前端录»js模版引擎handlebars.js实用教程——另一种Helper用法