html - Handlebars 将 '@partial-block' 内容移动到页面末尾

标签 html handlebars.js webpack-handlebars-loader

我正在使用带有 webpack 和 handlebars-loader(用于 webpack 的 Handlebars 模板加载器)的handlebars 来实现一个多页 web 应用程序。下面是我的 View 文件夹的结构(.hbs 文件)

  • 意见
  • 成分
  • sidebar.hbs

  • 布局
  • default.hbs
  • product.hbs

  • 索引.hbs
  • product-1.hbs
  • product-2.hbs
  • ...


  • 我的问题是我在 Handlebars 中看到了“部分阻止”的奇怪行为。我有两个布局来包装每个页面的主要内容。但我的布局没有在右行加载“部分块”。我在布局中使用部分块的任何地方, Handlebars 都会在该位置关闭正文和 html 标记,并在 html 关闭标记之后呈现部分块内容。
    下面是我在 body 内加载部分块的示例默认布局:
    <!DOCTYPE html>
    <html dir="rtl">
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>{{meta.title}}</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
    </head>
    
    <body class="theme-light">
    
        {{#if @partial-block}}
        {{> @partial-block }}
        {{/if}}
    </body>
    
    </html>
    
    我的 index.hbs 文件使用默认布局
    {{> layouts/default }}
    <main id="index" class="index">
        <p>This is index content</p>
    </main>
    
    {{layouts/default}}
    
    并呈现 html 文件
    <!DOCTYPE html>
    <html dir="rtl">
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>My Test Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
    </head>
    
    <body class="theme-light">
    
    </body>
    
    </html>
    <main id="index" class="index">
        <p>This is index content</p>
    </main>
    
    就像我说的,主标签在关闭 html 标签之后出现,这不是预期的行为。

    最佳答案

    有错误的语法。
    你应该这样打字。

    {{#> layouts/default }}
      <main id="index" class="index">
        <p>This is index content</p>
      </main>
    {{/layouts/default}}
    

    关于html - Handlebars 将 '@partial-block' 内容移动到页面末尾,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62673716/

    相关文章:

    javascript - 如何使用 Meteor.js 中的模板助手遍历对象中的两个数组

    javascript - 使用 Webpack 4 的 Handlebars 加载器

    java - 如何使用 Selenium WebDriver 检查单选按钮?

    javascript - 有没有办法将 slider 重置为图像 1?

    javascript - 更改输入标记

    php - 如何同时显示数组键和值?

    twitter-bootstrap - 为什么当我使用 Bootstrap 日期选择器时 Ember.js 会丢失 valueBinding?

    javascript - handlebars.js 示例 jquery 错误