CODEWITHSUNDEEP
javascripttemplateshandlebars.js
user4385532
user4385532

Reputation:

How to insert JavaScript code in a Handlebars template?

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 comment 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.compile(
    document.getElementById("template").innerHTML
  )({});
<script src="https://cdnjs.cloudflare.com/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?

Upvotes: 3

Views: 13806

Answers (1)

Sandeep Nayak
Sandeep Nayak

Reputation: 4757

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.compile(
    document.getElementById("template").innerHTML
  ))({});

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


}, false);
<script src="https://cdnjs.cloudflare.com/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>

Upvotes: 1

Related Questions