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>

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を介してデバッグしているときに、タイトルと本文の値を見つけることができます

4

1 に答える 1

6

要素のコンテンツを置き換えています<script>：

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

で#entry-templateあり、<script>:

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

<script>ブラウザは、 that を使用して のコンテンツを表示しませんtype。入力したテンプレートを次のようなものに入れたいとし<div>ます。

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

その後：

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