ハンドルバー：コンパイルできませんか？

私はHandlebarsとJavascriptの非常に新しい学習者ですので、事前に謝罪します。ハンドルバーを学ぶ方法として、私はオンラインの例からのすべての基本的なコンポーネントを1つの自己完結型Webページに入れようとしています。しかし、それはうまく動作しません。ハンドルバー：コンパイルできませんか？

<html> 
<head> 
    <script type="text/javascript" src="scripts/jquery-3.1.1.min.js" /> 
    <script type="text/javascript" src="scripts/handlebars-v4.0.5.js" /> 
</head> 
<body> 
<div id="content-placeholder"></div> 

<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> 

<script> 
    var source = $("#some-template").html(); 
    alert(source); 
    var template = Handlebars.compile(source); 
    var data = { users: [ 
     {username: "alan", firstName: "Alan", lastName: "Johnson",  email: "[email protected]" }, 
     {username: "allison", firstName: "Allison", lastName: "House", email: "[email protected]" }, 
     {username: "ryan", firstName: "Ryan", lastName: "Carson", email: "[email protected]" } 
    ]}; 
    $("#content-placeholder").html(template(data)); 
</script> 
</body> 
</html>

また、ソース（alert（source）は "undefined"と表示されます）を印刷できません。何か不足していますか？助けてくれてありがとう！

出典

2017-01-12 user180574

です問題。私の答えを見てみましょう –

jQueryとHandlebarsが含まれている上部にあるscriptタップを閉じていないようです。

あなたはスクリプトタグを閉じる必要があります。ここでは

<script type="text/javascript" src="scripts/jquery-3.1.1.min.js"></script> 
<script type="text/javascript" src="scripts/handlebars-v4.0.5.js"></script>

は完全な作業コードは、あなたが正しく、したがって `script`タグが閉じられていない

var source = $("#some-template").html(); 
 
alert(source); 
 
var template = Handlebars.compile(source); 
 
var data = { 
 
    users: [{ 
 
    username: "alan", 
 
    firstName: "Alan", 
 
    lastName: "Johnson", 
 
    email: "[email protected]" 
 
    }, { 
 
    username: "allison", 
 
    firstName: "Allison", 
 
    lastName: "House", 
 
    email: "[email protected]" 
 
    }, { 
 
    username: "ryan", 
 
    firstName: "Ryan", 
 
    lastName: "Carson", 
 
    email: "[email protected]" 
 
    }] 
 
}; 
 

 
$("#content-placeholder").html(template(data));

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script> 
 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<div id="content-placeholder"></div> 
 
<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>

出典

2017-01-13 04:16:01

私の良さ、私は "/>"は一般的にタグを閉じるために使用されたと思いました。どうもありがとう！ – user180574

ハンドルバー：コンパイルできませんか？

答えて

関連する問題