VSCode中Handlebars模板无法显示及运行问题求助

问题核心错误 #

你的代码存在两个关键问题导致模板无法正常渲染：

1. 模板内包含交互按钮：将触发渲染的<button>放在了script模板标签内部，这不仅会导致VSCode语法解析异常（结尾<变灰），还会让按钮成为模板的一部分，而非页面常驻的交互元素。
2. 缺少渲染目标容器：JS中尝试将渲染结果插入#output元素，但HTML里并没有这个容器，导致渲染后的内容无处挂载。

修复步骤 #

• 将触发渲染的按钮从模板script标签中移出，放在页面的body区域内。
• 在HTML中添加一个id="output"的容器，用于承载渲染后的模板内容。
• 确保模板内部的标签结构完整，避免与外部HTML解析冲突。

修正后的代码 #

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>handlebars</title>
    <link rel="stylesheet" type="text/css" href="css/custom.css">
    <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
</head>
<body>
    <div class="container">
        Hello!
    </div>
    <!-- 新增渲染目标容器 -->
    <div id="output"></div>
    <!-- 按钮移到模板外 -->
    <button onclick="fill_template()">fill template</button>

    <script id="template" type="text/x-handlebars-template">
        <h1>{{title}}</h1>
        <ol>
            {{#each list}}
                <li>{{this.name}}</li>
            {{/each}}
        </ol>
        <p>{{footer}}</p>
    </script>
 
    <script src="js/main.js"></script>
</body>
</html>

main.js代码

function fill_template() {
    let data = {
        title: "Why Handlebars are so cool!",
        list: [
            {name: "You can generate stuff"},
            {name: "It works on both ends"},
            {name: "It weighs like 24 kb"},
            {name: "haha templates go brrrrrr <b> bold </b>"}
        ],
        footer: "This is a footer"
    };
    let template = Handlebars.compile(document.querySelector("#template").innerHTML);
    let filled = template(data);
    document.querySelector("#output").innerHTML = filled;
}

额外优化建议 #

• 安装VSCode的Handlebars扩展（如Handlebars Language Features），可以提升模板的语法高亮和错误提示能力，避免类似的语法解析异常。
• 若需要保留模板中的HTML标签渲染（比如数据里的<b>），可以使用Handlebars的{{{triple curly braces}}}语法，避免HTML转义：将模板中的{{this.name}}改为{{{this.name}}}，这样数据里的<b> bold </b>会被渲染为粗体文本而非纯字符串。

内容的提问来源于stack exchange，提问作者Luis Alejandro López de Anda