使用jQuery+huandlebars判断类型的helper

时间：2021-07-26 20:16:11

兼容ie8（很实用，复制过来，仅供技术参考，更详细内容请看源地址：http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html）

<!DOCTYPE html>

<html>

  <head>

    <META http-equiv=Content-Type content="text/html; charset=utf-8">

    <title>另一种Helper用法 - by 杨元</title>

  </head>

  <body>

    <h1>另一种Helper用法</h1>

    <!--基础html框架-->

    <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>

    <!--Handlebars.js模版-->

    <!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句-->

    <!--id可以用来唯一确定一个模版,type是模版固定的写法-->

    <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>

    <!--进行数据处理、html构造-->

    <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>

相关文章