handlebars.js不呈现文档
[英]handlebars.js doesnt render document
问题描述
I ve got a problem with handlebars.js. 
我在handlebars.js中遇到了问题。 perhaps it is totally trivial but i am also totally new in handlebars. 也许这完全是微不足道的，但是我在车把上也是全新的。 So...here is sample code in my index.html which goes like this: 所以...这是我的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 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>
And there is also this content.js file which contains simple javascript code but it still doesnt work. 还有这个content.js文件，其中包含简单的javascript代码，但仍然无法正常工作。 If any of you could advise or give solution i'd be very thankful. 如果您能提出建议或提出解决方案，我将非常感激。 Thank you in advance 先感谢您
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));
Best regards 最好的祝福
2 个解决方案
解决方案1
1 2013-06-04 02:51:48
Unless you created a custom block helper iterator called "users" then the following block will not execute which would be why nothing is visible when you attempt to render your template. 除非您创建了一个名为“ users”的自定义块帮助器迭代器，否则以下块将不会执行，这就是为什么当您尝试渲染模板时看不到任何东西的原因。
Incorrect Block Helper Iterator: 不正确的块帮助器迭代器：
{{#users}}
...
{{/users}}
Based on the data you gave in your example you should do the following: 根据示例中提供的数据，您应该执行以下操作：
Correct Block Helper Iterator: 正确的块帮助器迭代器：
{{#each user}}
My name is {{this.firstname}} {{this.lastname}} and my email is {{this.email}}.
{{/each}}
You can reference block helpers on the Handlebarsjs documentation site. 您可以在Handlebarsjs文档站点上引用块帮助器。 It might be a little challenging to digest at first, but play around a bit and you will start to learn some of the Handlebarsjs features. 刚开始消化可能会有些挑战，但是经过一些尝试，您将开始学习Handlebarsjs的一些功能。
解决方案2
0 2013-05-29 19:07:29
You're importing your "content.js" script before you import jQuery.
在导入jQuery 之前，您要导入“ content.js”脚本。 The code in that script should be wrapped in a jQuery "ready" handler:
该脚本中的代码应包装在jQuery“就绪”处理程序中： $(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)); });
The first problem would cause an error to be logged in your browser's console. 第一个问题将导致错误记录在浏览器的控制台中。 That's something you should always check first. 这是您应该始终首先检查的内容。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.