Quoting Handlebars FAQ:

How can I include script tags in my template?

If loading the template via an inlined tag then you may need to break up the script tag with an empty ment to avoid browser parser errors:

<script type="text/x-handlebars">
  foo
  <scr{{!}}ipt src="bar"></scr{{!}}ipt>
</script>

Nevertheless, I can't seem to be able to implement this:

document.getElementById('output').innerHTML = 
  Handlebarspile(
    document.getElementById("template").innerHTML
  )({});

<script src=".js/4.0.10/handlebars.js"></script>

<script id="template" type="text/x-handlebars">
  foo
  <scr{{!}}ipt>
    alert("Yay!");
  </scr{{!}}ipt>
</script>

<div id="output"></div>

Quoting Handlebars FAQ:

How can I include script tags in my template?

If loading the template via an inlined tag then you may need to break up the script tag with an empty ment to avoid browser parser errors:

<script type="text/x-handlebars">
  foo
  <scr{{!}}ipt src="bar"></scr{{!}}ipt>
</script>

Nevertheless, I can't seem to be able to implement this:

document.getElementById('output').innerHTML = 
  Handlebars.pile(
    document.getElementById("template").innerHTML
  )({});

<script src="https://cdnjs.cloudflare./ajax/libs/handlebars.js/4.0.10/handlebars.js"></script>

<script id="template" type="text/x-handlebars">
  foo
  <scr{{!}}ipt>
    alert("Yay!");
  </scr{{!}}ipt>
</script>

<div id="output"></div>

As you can see no Yay! is alerted.

How to make this work?

• javascript
• templates
• handlebars.js

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Aug 9, 2017 at 1:11 user4385532user4385532 1

• It works if I use jQuery .html() though instead of innerHTML – Sandeep Nayak Commented Aug 10, 2017 at 4:55

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

I tried the same with jQuery's .html() and it worked fine. I could narrow down on .innerHTML being the culprit when I looked into this answer.

In short, script tags inserted with .innerHTML needs to be explicitly evaluated using eval().

So below code works, if you eval the script:

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("output").innerHTML = (Handlebars.pile(
    document.getElementById("template").innerHTML
  ))({});

  eval(document.getElementById("myscript").innerHTML); // explicitly eval the script


}, false);

<script src="https://cdnjs.cloudflare./ajax/libs/handlebars.js/4.0.10/handlebars.js"></script>

<script id="template" type="text/x-handlebars">
  foo
  <scr{{!}}ipt id="myscript" src="bar">console.log("Hello")</scr{{!}}ipt>
</script>

<div id="output"></div>