handlebars 引入子模板

以前都是通过预编译使用handlebars模版，webpack的handlebars-loader，可以很轻松使用子模板简化逻辑。今天给后端同事支持，是在浏览器端编译handlebars，想使用子模板，发现居然没有！还好handlebars用得熟悉，通过helper实现了子模板功能

不废话直接上代码：

html代码：

<script type="text/html" id="test">
    <div>
        <div>{{title}}</div>
        {{{include 'hbs-child' children}}}
    </div>
</script>
<!-- 子模板 -->
<script type="text/html" id="hbs-child">

    <ul>
        {{#each this}}
        <li>{{name}}：{{desc}}</li>
        {{#if children}}
            {{{include 'hbs-child' children}}}
        {{/if}}
        {{/each}}
    </ul>

</script>

js代码：

Handlebars.registerHelper("include", function(id, data) {
    var html = $('#'+id).html();
    return Handlebars.compile(html)(data);
});

var data = {
    title: '喵星人',
    children: [
        {
            name: '宠物猫',
            desc: '卖萌'
        },{
            name: '家猫',
            desc: '抓老鼠',
            children: [
                {name: '白猫', desc: '可爱'},
                {name: '黑猫', desc: '警长？'}
            ]
        }
    ]
}
var html = Handlebars.compile($('#test').html())(data);
$('body').append(html);

输出结果为：

喵星人

• 宠物猫：卖萌
• 家猫：抓老鼠
• • 白猫：可爱
  • 黑猫：警长？

如您所见，该语法是支持嵌套的。
要注意的是： 该helper使用时要三层大括号，记住是三层！！！

{{{include 'childHbsId' childData}}}