Question

我正在为我的示例应用程序实现handlebar.js。根据handlebar.js文档，它尝试使用上面提到的示例。但是这些值会加载到脚本中的dom中，但在浏览器中不可见。

HTML

<body>
<h1>Handlebar</h1>
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
</div>
</script>
<script  src="js/jquery-1.8.3.min.js"></script>
<script  src="js/handlebars.js"></script>
<script  src="js/app.js"></script>
</body>

app.js

var source   = $("#entry-template").html();
var template = Handlebars.compile(source);
var context = {title: "My New Post", body: "This is my first post!"}
var html    = template(context);
$("#entry-template").html(template(context));

当浏览器加载时我得到一个空白屏幕，但是通过firebug进行调试时能够找到值title和body

Answer 1

您正在替换<script>元素的内容：

$("#entry-template").html(template(context));

和#entry-template是<script>：

<script id="entry-template" type="text/x-handlebars-template">

浏览器不会使用<script>显示type s的内容。您希望将填好的模板放入将显示的<div>内容：

<h1>Handlebar</h1>
<div id="html-goes-here"></div>

然后：

$("#html-goes-here").html(template(context));

使用handlebar.js时，数据在浏览器上不可见

1 个答案: