handlebars 引入子模板

最新推荐文章于 2023-09-11 11:09:14 发布

原创

最新推荐文章于 2023-09-11 11:09:14 发布 · 5.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#handlebars #子模板 #include #子模板语法

本文介绍了在浏览器端编译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