我是 Handlebars 和 Javascript 的新手，所以我提前道歉。作为学习 Handlebars 的一种方法，我尝试将在线示例中的所有基本组件放入一个独立的网页中。然而它运行得并不好。
<html>
<head>
<script type="text/javascript" src="scripts/jquery-3.1.1.min.js" />
<script type="text/javascript" src="scripts/handlebars-v4.0.5.js" />
</head>
<body>
<div id="content-placeholder"></div>
<script id="some-template" type="text/x-handlebars-template">
<table>
<thead>
<th>Username</th>
<th>Real Name</th>
<th>Email</th>
</thead>
<tbody>
{{#users}}
<tr>
<td>{{username}}</td>
<td>{{firstName}} {{lastName}}</td>
<td>{{email}}</td>
</tr>
{{/users}}
</tbody>
</table>
</script>
<script>
var source = $("#some-template").html();
alert(source);
var template = Handlebars.compile(source);
var data = { users: [
{username: "alan", firstName: "Alan", lastName: "Johnson", email: "alan@test.com" },
{username: "allison", firstName: "Allison", lastName: "House", email: "allison@test.com" },
{username: "ryan", firstName: "Ryan", lastName: "Carson", email: "ryan@test.com" }
]};
$("#content-placeholder").html(template(data));
</script>
</body>
</html>
此外，我无法打印源代码(alert(source) 显示“未定义”)。有什么遗漏吗？感谢您的帮助!
最佳答案
看起来您还没有关闭顶部的 script ta，其中包含 jQuery 和 Handlebars。
您应该关闭脚本标签:
<script type="text/javascript" src="scripts/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="scripts/handlebars-v4.0.5.js"></script>
这是完整的工作代码
var source = $("#some-template").html();
alert(source);
var template = Handlebars.compile(source);
var data = {
users: [{
username: "alan",
firstName: "Alan",
lastName: "Johnson",
email: "alan@test.com"
}, {
username: "allison",
firstName: "Allison",
lastName: "House",
email: "allison@test.com"
}, {
username: "ryan",
firstName: "Ryan",
lastName: "Carson",
email: "ryan@test.com"
}]
};
$("#content-placeholder").html(template(data));<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="content-placeholder"></div>
<script id="some-template" type="text/x-handlebars-template">
<table>
<thead>
<th>Username</th>
<th>Real Name</th>
<th>Email</th>
</thead>
<tbody>
{{#users}}
<tr>
<td>{{username}}</td>
<td>{{firstName}} {{lastName}}</td>
<td>{{email}}</td>
</tr>
{{/users}}
</tbody>
</table>
</script>关于javascript - Handlebars : not able to compile?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41622936/