以前都是通过预编译使用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: '喵星人',
chil