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

Question

我有一个预编译的 Handlebars 模板。我只是有一个要向其发送值的 html(像平常一样)，但我决定要包含一个在将其插入 DOM 时要执行的脚本。但是，我无法运行该脚本。

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

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

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

我正在将 Handlebars 注入(inject)到 DOM 中，并且该部分正在工作(已注入(inject) html 并且正在设置变量)。但是，该脚本永远不会执行。

有什么想法吗？

Answer 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
});

<小时/>

编辑

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