handlebars 引入子模板

本文介绍了在浏览器端编译handlebars时如何通过自定义helper实现子模板功能。使用handlebars-loader在webpack中轻松处理子模板,但在浏览器端则需要创建辅助函数来达到相同效果。文中提供了一个实例,展示如何通过三层大括号调用helper,实现模板的嵌套输出,例如宠物猫、家猫、白猫和黑猫的不同描述。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

以前都是通过预编译使用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
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值