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

Question

In my home page, I'm loading the header from an external file with jQuery.load():

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

The page loads fine, but the Handlebars {{}} expressions are treated as text:

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

The code inside the if statement runs no matter of auth's value, and the page will display {{#if auth}} {{/if}} where I typed it.

If I move all the code in the page header (instead of loading it through jQuery), it works. What should I do to make .load() recognize the expression instead of treating it like text?

I have also tried moving the if statement inside the home page but then the script won't work as the elements are not yet defined, as the header is not yet loaded at this time.

Thanks!

Answer 1

I've managed to get past this problem by declaring my headers and footer as Handlebars partials and loading them as such in the view, instead of using jQuery.

In my index.js I've added:

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')
)

And then, inside the page itself, call the header/footer with

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