Javascript handlebar.js不呈现文档
我对handlebar.js有问题。也许这是完全琐碎的,但我也是全新的车把。下面是my index.html中的示例代码,如下所示:Javascript handlebar.js不呈现文档,javascript,templates,handlebars.js,Javascript,Templates,Handlebars.js,我对handlebar.js有问题。也许这是完全琐碎的,但我也是全新的车把。下面是my index.html中的示例代码,如下所示: <!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js l
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<script data-main="scripts/main" src="scripts/require.js"></script>
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="scripts/modernizr-2.6.2.min.js"></script>
<script src='scripts/content.js'></script>
<script src='scripts/handlebars-1.0.0-rc.4.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="scripts/jquery-1.9.1.min.js"><\/script>')</script>
<script src="scripts/plugins.js"></script>
<script src="scripts/main.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<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>
</body>
</html>
致意
第一个问题将导致在浏览器控制台中记录错误。这是您应该首先检查的内容。除非您创建了一个名为“用户”的自定义块辅助迭代器,否则将不会执行以下块,这就是为什么在您尝试渲染模板时什么都看不见的原因 不正确的块辅助迭代器: 根据您在示例中提供的数据,您应该执行以下操作: 正确的块辅助迭代器:
可以在文档网站上参考块帮助程序。一开始消化起来可能有点困难,但仔细研究一下,您将开始学习一些Handlebarsjs功能 你说的“它不起作用”到底是什么意思?浏览器控制台中是否报告了错误?有什么事发生吗?到目前为止,你做了什么来调试这个问题?content.js中保存的内容应该呈现在屏幕上,但实际上什么也没有发生,屏幕是完全白色的,没有任何数据。谢谢你的建议,但它也不起作用。我在jquery文件之后移动了content.js,并将整个content.js放在ready处理程序中。真的不知道出了什么问题……但它仍然只是javascript文件,因此应该在浏览器中正常运行……或者……它需要服务器端编程?@HermanCodelove您在控制台中检查了错误吗?您是否添加了一些
console.log()
调用以确保代码被成功调用?控制台中显示了一个错误:Uncaught SyntaxError:Unexpected token-仅此而已。@HermanCodelove听起来可能是代码中某个隐藏的特殊字符。当您从JSFIDLE或其他一些在线编辑环境剪切和粘贴代码时,有时会发生这种情况。发现这样的问题可能很棘手。是的,我发现了那个bug,但它是由main.js引起的。我已删除该文件,但它仍然无法工作…把手Y你没有渲染?!:D
var source = $("#some-template").html();
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));
$(function() {
var source = $("#some-template").html();
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));
});
{{#users}}
...
{{/users}}
{{#each user}}
My name is {{this.firstname}} {{this.lastname}} and my email is {{this.email}}.
{{/each}}