Handlebars 使用

引入js

<script src="js/json3.min.js"></script>
<script src="js/handlebars-v4.0.12.js"></script>

设置模板

<script id="css1" type="text/x-handlebars-template">
    <style type="text/css">
        .gridtable {
            font-family: verdana, arial, sans-serif;
            font-size: 13px;
            color: #333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
        }

        .gridtable td {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #ffffff;
        }
    </style>
</script>

调用

//返回模板编译后的结果
    function getHtml(id,d) {
        var o = d || {};
        var h = Handlebars.compile($('#' + id).html());
        return h(o);
    }

循环

{{#each list}}
    <tr>
        <td>{{rownum}}</td>
        <td>{{cwardname}}</td>
        <td>{{nums}}</td>
        <td>{{cxyrs}}</td>
        <td>&nbsp;</td>
        <td>{{gxy35}}</td>
        <td>{{gxy35}}</td>
    </tr>
    {{/each}}

判断  

Handlebars.registerHelper("compare", function (v1, options) {
        if (v1) {
            return options.fn(this); // 满足添加继续执行
        } else {
            return options.inverse(this); // 不满足条件执行{{else}}部分
        }
    });

使用 上面的判断 

{{#compare obj2.name1}}
                <input type="checkbox"/>无&emsp;<input type="checkbox"/>有&emsp;原因：<br/>
                1.<br/>
                2.<br/>
                {{else}}
                &nbsp;
                {{/compare}}

 

注册使用helper ，下面是循环里  索引加一的helper

Handlebars.registerHelper("addOne", function (index, options) {
                return parseInt(index) + 1;
            });

{{#each list}}
    <tr>
        <td>{{addOne @index}}</td>
        <td>{{itemname}}</td>
        <td>{{qty}}</td>
        <td>{{p2}}</td>
        <td>{{itemunit}}</td>
    </tr>
    {{/each}}

取值

正常取值 {{name}}，
不转义   {{{html}}}