2012-04-02 1 views
1

私はこのコードを持っているindex.htmlを持っています:私は、ハンドルバーのサイトのドキュメントからそれに続きましたが、私はそれを動作させることができません。文字列をvar sourceに渡すとうまくいきますが、$(#elem_id)を使ってテンプレートを取得しようとすると、ハンドルバーにデータが挿入されません。このhandlebars.jsコードで何が問題になっていますか?

<html> 
<head> 
<script src="../static/js/handlebars-1.0.0.beta.6.js"></script> 
<script src="../static/jquery/1.7.1/jquery.js"></script> 
</head> 


<body> 
    <script id="entry-template" type="text/x-handlebars-template"> 
    <div class="entry"> 
     <h1>{{title}}</h1> 
     <div class="body"> 
      {{body}} 
     </div> 
    </div> 
    </script> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      var source = $("#entry-template").html(); 
      var template = Handlebars.compile(source); 
      var d = {"title": "My New Post", "body": "This is my first post!"}; 
      var result = template(d); 
      console.log(result); //This just returns the template html, without the data 
     }); 
    </script> 


</body> 
</html> 
+0

私はちょうどそれをテストしてみた、それは私のマシン上で正常に動作します(Chromeを使用して) - あなたは、古いバージョンを見ていますか何か? –

+0

それは変だけど、私にとってはうまくいかない。これは何らかのjqueryバージョンに依存しますか? – John

+0

あなたは正しいです、それは動作します:http://jsfiddle.net/JFZTS/私のenvと何か間違っています(私はそれの周りにtwitterブートストラップコードの負荷があります) – John

答えて

1

これは、HTMLがscriptタグであることが原因であると想定しています。すなわち、目に見えないのdiv内にHTMLをラップしてみてください(またはdiv要素自体を不可視):

<div style='display:none;' id="entry-template" type="text/x-handlebars-template"> 
    <div class="entry"> 
     <h1>{{title}}</h1> 
     <div class="body"> 
      {{body}} 
     </div> 
    </div> 
</div> 
+1

ハンドルバーのドキュメントを確認してください。

関連する問題