zoukankan      html  css  js  c++  java
  • js模版引擎handlebars.js实用教程——另一种Helper用法

    返回目录

      1 <!DOCTYPE html>
      2 <html>
      3   <head>
      4     <META http-equiv=Content-Type content="text/html; charset=utf-8">
      5     <title>另一种Helper用法 - by 杨元</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是从当前上下文中读取的性别代码。

  • 相关阅读:
    一个很low的登录界面
    python 中的反射
    【Java】SpringMVC中URL传递参数-ant风格
    【springMVC】用maven构建第一个springMVC程序
    【Mybatis】mybatis登录实例
    【Mybatis】Mybatis简单使用
    【Java】Quartz的简单使用
    【Java】腾讯云发送短信验证码-Struts2
    【Java】web项目中发送邮件验证码-Struts2
    Bootstrap-fileinput文件上传组件
  • 原文地址:https://www.cnblogs.com/iyangyuan/p/3471357.html
Copyright © 2011-2022 走看看