我无法在VSCode中使用句柄显示HTML模板。我在一个HTML文件中创建了我的模板，其中包含script标签，它包含一个名为“text/x-handlebars-template”的类型属性。需要注意的一件事是，脚本标记在代码结束时改变了颜色，只要我在脚本中写入type属性。请看脚本末尾的灰色符号'<'。任何使此模板运行的建议都将非常有帮助。
下面是图片：
x1c 0d1x的数据
下面是我的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>
<script id="template" type="text/x-handlebars-template">
<h1>{{title}}</h1>
<ol>
{{#each list}}
<li>{{this.name}}</li>
{{/each}}
</ol>
<p>{{footer}}</p>
<button onclick="fill_template()">fill template</button>
</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;
}型
1条答案
按热度按时间7tofc5zh1#
我认为这是我的错误，因为我把按钮标记留在了脚本标记中。这就是为什么它不起作用的原因。我还添加了output div，它允许呈现数据。结尾处样式标记的颜色未导致任何问题。这样问题就解决了！再次感谢！