Hanlebars.js 模板引擎

| 涉及知识点
|
|

headlebars介绍

Handlebars 是 JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"（无逻辑模版）的思路，在加载时被预编译，而不是到了客户端执行到代码时再去编译， 这样可以保证模板加载和运行的速度。Handlebars兼容Mustache，你可以在Handlebars中导入Mustache模板。

下载与安装

1、下载handlebars.js文件在页面中直接引用

2、通过npm下载，require('handlebars')直接引用

使用Handlebars

<!-- 编译模板后输出的位置 -->    
  <div id="tableList"></div>

<!-- 定义的模板 -->
<script id="table-template" type="text/x-handlebars-template">
    {{date.year}} 年 {{date.month}} 月 {{date.day}} 日 <br>
    <table>
      {{#each person}}
           <tr>
          <td>姓名:{{name}}, 年龄:{{age}}</td>
        </tr> 
      {{/each}}
      </table>
</script>

<!--插件引用-->
<script src="js/lib/zepto.js"></script>
<script src="js/lib/handlebars.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {

    // 模拟的json对象
    var data = {
        date: {
            year: '2016',
            month: '12',
            day: '26'
        },
        person: [
            {name: 'siguang', age: 20},
            {name: 'lulu', age: 20},
            {name: 'haha', age: 20},
            {name: 'heihei', age: 20}
        ]
    }

     // 预编译模板
    var myTemplate = Handlebars.compile($("#table-template").html());

    //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。
    $('#tableList').html(myTemplate(data));

  });
</script>

handlebars语句

1、{{#each 对象 }}  循环数据

<script id="table-template" type="text/x-handlebars-template">
  {{#each student}}
    <tr>
      <td>{{name}}</td>
      <td>{{sex}}</td>
      <td>{{age}}</td>
    </tr> 
  {{/each}}
</script>


2、{{#each }} 嵌套

    {{#each this}} each中的this

    <!-- 定义的模板 -->
    <script id="table-template" type="text/x-handlebars-template">
        {{#each this}}
            {{#each info}}
                <!-- 这里取name 使用../到上一层来取， info数组内容使用this来输出 -->
                {{../name}}的{{this}}<br>
            {{/each}}
        {{/each}}
    </script>


    <script src="js/lib/zepto.js"></script>
    <script src="js/lib/handlebars.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        //模拟的json对象
        var data = [
             {
                "name":"张三",
                "info":[
                    "眼睛",
                    "耳朵",
                    "鼻子"
                ]
            },
            {
                "name":"李四",
                "info":[
                    "爸爸",
                    "妈妈",
                    "妻子"
                ]
            }
        ];

        var myTemplate = Handlebars.compile($("#table-template").html());
        $('#dataList').html(myTemplate(data));
      });
    </script>


3、@index 访问父级索引

    <script id="table-template" type="text/x-handlebars-template">
        <table>
        {{#each this}}
            <tr>
                <td>{{addOne @index}}.</td>
                <td>{{name}}</td>
                <td>{{sex}}</td>
                <td>{{age}}</td>
            </tr>
        {{/each}}
        </table>
    </script>

    <!--进行数据处理、html构造-->
    <script type="text/javascript">
        var data = [
            {
                name: "张三",
                sex: "男",
                age: 35
            },{
                name: "李四",
                sex: "男",
                age: 23
            },{
                name: "甜妞",
                sex: "女",
                age: 18
            }
        ];

        // 注册索引+1的helper
        var handleHelper = Handlebars.registerHelper("addOne",function(index){
            //返回+1之后的结果
            return index+1;
        });

        //解析模版
        var handle = Handlebars.compile($("#table-template").html());
        //生成html
        var html = handle(data);
        //插入到页面
        $("#dataList").append(html);
    </script>


4、#with 循环时进行到某一个上下文

    <script id="table-template" type="text/x-handlebars-template">
    <table>
        {{#each this}}
        <tr>
            <td>{{name}}</td>
            <td>{{sex}}</td>
            <td>{{age}}</td>
            <td>
                <!-- 这里通过 #with 直接找到favorite数组 -->
                {{#with favorite}}
                {{#each this}}
                <p>{{name}}</p>
                {{/each}}
                {{/with}}
            </td>
        </tr> 
        {{/each}}
    </table>

    </script>

    <!--进行数据处理、html构造-->
    <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框架
        var myTemplate = Handlebars.compile($("#table-template").html());

        // 将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。
        $('#dataList').html(myTemplate(data));
    });
    </script>

5、{{#if }} 判断

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


6、registerHelper() 注册handlebars

    需要用到js处理并返回数据需要用到注册，类似过滤器

    <script id="table-template" type="text/x-handlebars-template">
    {{#each student}}
        {{#if name}}

            <!-- compare 注册名， age 20 为参数 -->
            {{#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>

    //注册一个比较大小的Helper,判断v1是否大于v2
    Handlebars.registerHelper("compare",function(v1,v2,options){
        if(v1>v2){
            //满足添加继续执行
            return options.fn(this);
        }
        else{
            //不满足条件执行{{else}}部分
            return options.inverse(this);
        }
    });

| 参考资料
| http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html