如何使用（或不使用）jQuery 加载外部文件句柄表达式？

Question

在我的主页中，我使用 jQuery.load():

从外部文件加载 header

<header>
  <script>
    $("header:first-of-type").load("./pages/common/header.handlebars");
  </script>
</header>

页面加载正常，但 Handlebars {{}} 表达式被视为文本：

            {{#if auth}}
            <script>
                // change style values of elements inside external file (nav bar "register" link) to hidden
            </script>
            {{/if}}

无论 auth 的值如何，if 语句中的代码都会运行，页面将在我输入它的地方显示 {{#if auth}} {{/if}}。

如果我移动页面 header 中的所有代码（而不是通过 jQuery 加载它），它就可以工作。我应该怎么做才能让 .load() 识别表达式而不是像对待文本一样对待它？

我也试过在主页中移动 if 语句，但是由于元素尚未定义，脚本将无法运行，因为此时 header 尚未加载。

谢谢！

Answer 1

我通过将我的页眉和页脚声明为 Handlebars partials 并将它们原样加载到视图中而不是使用 jQuery 来解决这个问题。

在我的 index.js 我添加了：

const handlebars = require('handlebars')

handlebars.registerPartial(
    'headerAuth',
    fs.readFileSync(__dirname + "\views\partials\header-auth.handlebars", 'utf8')
)
handlebars.registerPartial(
    'header',
    fs.readFileSync(__dirname + "\views\partials\header.handlebars", 'utf8')
)
handlebars.registerPartial(
    'footer',
    fs.readFileSync(__dirname + "\views\partials\footer.handlebars", 'utf8')
)

然后，在页面内部，调用 header/footer 和

<header>
    {{> header}}
</header>

如何使用（或不使用）jQuery 加载外部文件句柄表达式？

How to load external file handlebars expressions with (or without) jQuery?

javascript

jquery

external

handlebars.js