Handlebars实用教程

在 React 和 Vue 大行其道的今天，对于一个小型项目而言，前端技术选型时的首选方案还是 jQuery。

今天要探讨的就是使用 jQuery 做 web 开发时一个常见的场景——通过 ajax 实现异步加载更多的功能。

实现这个功能，免不了要在请求成功的回调里拼接 HTML，不仅如此，还有可能要在里面写判断，写 for 循环……其结果就是 JS 代码里穿插着一堆难以维护的 HTML 代码，看上去简直令人窒息！

为了解决这个问题，模板引擎横空出世！

虽然模板引擎早已不是什么新鲜事物，ES6 的字符串模板也在一定程度上削弱了它的魅力，但在涉及到判断、循环等情形时模板引擎还是更胜一筹。

本文要介绍的 Handlebars 便是众多模板引擎里性能比较出众的一种。

它的用法很简单，下面这个实例基本上涵盖了 handlebars 的大部分功能，请各位客官慢用 : )

HTML代码

<table>
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody id="target"></tbody>
</table>

<script type="text/javascript" src="handlebars.min.js"></script>
<script id="tpl" type="text/x-handlebars-template">
    {{#each student}}
    <tr>
        <td>{{addOne @index}}</td>
        <td>{{#if name}}{{name}}{{/if}}</td>
        <td>{{age}}</td>
        <td>{{transformat sex}}</td>
    </tr>
    {{/each}}
</script>

javascript代码

var data = {
    "student": [
        {
            "name": "张三",
            "sex": "0",
            "age": 18
        },
        {
            "sex": "0",
            "age": 22
        },
        {
            "name": "妞妞",
            "sex": "1",
            "age": 18
        }
    ]
};

renderTpl('#tpl', data, '#target');

function renderTpl(tplSelector, data, htmlSelector) {
    var t = $(tplSelector).html(),
        f = Handlebars.compile(t),
        h = f(data);
    $(htmlSelector).html(h);
}

Handlebars.registerHelper({
    addOne: function(index) {
        return index+1;
    },
    transformat: function(value) {
        if(value == 0){
            return "男";
        }else{
            return "女";
        }
    }
});