Handlebars - 预编译模板中的脚本不运行答案

【问题标题】：Handlebars -- script in precompiled template doesn't runHandlebars - 预编译模板中的脚本不运行
【发布时间】：2015-06-04 16:04:26
【问题描述】：

我有一个预编译的车把模板。我只是有要向其发送值的 html（像往常一样），但我决定在将其插入 DOM 时包含一个要执行的脚本。但是，我无法让脚本运行。

很多人似乎在他们的车把模板没有预编译时遇到过这个问题，但我没有看到很多预编译的问题。

这是我的 .hbs 文件的基本结构：

<div>
    <h1>{{title}}</h1>
</div>
<script>
    // please do something
    alert('Executing the script');
</script>

我将把手注入 DOM 并且该部分正在工作（注入 html 并且正在设置变量）。但是，该脚本永远不会执行。

有什么想法吗？

【问题讨论】：

您可以创建某种标签处理程序来将脚本“注入”到您的车把模板中。实际上，您不能也不应该将这样的脚本注入 Handlebars。它不是 HTML。
@WiktorMociun 你是什么意思？
@Skitterm 取决于浏览器，您尝试归档的内容将不被允许，因此无法正常工作。较旧的浏览器通常对 XSS 的限制更加宽松。大多数现代浏览器不喜欢通过.innerHTML 进行脚本注入

【解决方案1】：

正如我在之前写的评论中提到的，您不能直接将脚本添加到 Handlebars 模板中。

您可以创建新的 HTML 标记，您可以动态地将其视为可以完成您想做的工作的代码。示例：

<div data-handlebars-script="example-stack-overflow"></div>

或

<example-stack-overflow />

（我更喜欢采用更标准的方式 - 第一种方式）。

渲染模板后，您可以使用例如jQuery.

$('div[data-handlebars-script="example-stack-overflow"').each(function() { 
  // Do your stuff here
});

编辑

让我在侧面发表评论。如果你需要做这样的事情，那可能表明你的设计存在某种缺陷。

【讨论】：