Question

引用Handlebars FAQ:

如何在模板中包含脚本标记？

如果通过内联标记加载模板，那么您可能需要使用空注释拆分脚本标记以避免浏览器解析器错误：
<script type="text/x-handlebars">
  foo
  <scr{{!}}ipt src="bar"></scr{{!}}ipt>
</script>

尽管如此，我似乎无法实现这一点：

＆＃13;

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

＆＃13;

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

＆＃13;

正如您所看到的，Yay!没有被警告。

如何使这项工作？

Answer 1

我尝试使用jQuery＆＃39; .html()并且它运行良好。当我调查this回答时，我可以将.innerHTML缩小为罪魁祸首。

简而言之，需要使用script显式评估.innerHTML插入的eval()标记。

以下代码有效，如果您评估脚本：

＆＃13;

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("output").innerHTML = (Handlebars.compile(
    document.getElementById("template").innerHTML
  ))({});

  eval(document.getElementById("myscript").innerHTML); // explicitly eval the script


}, false);

＆＃13;

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

＆＃13;

如何在Handlebars模板中插入JavaScript代码？

1 个答案: