0

我正在为我的示例应用程序实现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>

应用程序.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

4

1 回答 1

6

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

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

并且#entry-template是<script>：

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

浏览器不会<script>用 that 显示 s的内容type。您想将您填写的模板放入<div>将显示的内容中：

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

接着：

$("#html-goes-here").html(template(context));
于 2013-01-20T14:28:24.200 回答