ハンドルバーテンプレートにデータを渡すことができません

https://www.youtube.com/watch?v=3zVYH16yogQ&t=58sのチュートリアルのハンドルバーテンプレートでのデータのレンダリングについて説明していますが、データをテンプレートに渡すことができません。ハンドルバーテンプレートにデータを渡すことができません

マイglobal.jsファイル：

$(document).ready(function(){ 



var source = $("#first-template").html(); 
var template = Handlebars.compile(source); 


var context = { 
    title1 : "hello", 
    body1 : "body1" 
} 

var el_html = template(context); 

$("#render_here").html(el_html); 
$("#render_here_again").html(el_html); 


});

マイビューファイル：

<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    <link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet" media="screen"> 
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 

    <script type="text/javascript" src="../javascripts/global.js"> </script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script> 


</head> 
<body> 
    <button name = "click" id ="click" >click </button> 
<div id ="render_here"> 
    first 
</div> 

<div id ="render_here_again"> 
    second 
</div> 

<script id = "first-template" type="text/x-handlebars-template"> 
      <div> 
       <h1 style ="color:green">{{title1}}</h1> 
       <h2 style ="color:blue">{{body1}}</h2> 
     </div> 
</script> 
</body> 
</html>

ページをレンダリングするときにコンテキスト変数からデータをロードする必要があるが、しかし、それは空白です。コンソールにログオンするとオブジェクトが表示され、console.log（el_html）にスクリプトテンプレートが表示されますが、コンテキストは表示されません。私が間違っていることは何か考えていますか？

出典

2017-03-05 user

これは私のために働いています。また、

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Page Title</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script> 
 
     $(document).ready(function(){ 
 

 
      var source = $("#first-template").html(); 
 
      var template = Handlebars.compile(source); 
 

 
      var context = { 
 
       title1 : "hello", 
 
       body1 : "body1" 
 
      }; 
 

 
      var el_html = template(context); 
 

 
      $("#render_here").html(el_html); 
 
      $("#render_here_again").html(el_html); 
 

 
     }); 
 
    </script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script> 
 
</head> 
 
<body> 
 

 
<button name = "click" id ="click" >click </button> 
 
<div id ="render_here"> 
 
    first 
 
</div> 
 

 
<div id ="render_here_again"> 
 
    second 
 
</div> 
 

 
<script id = "first-template" type="text/x-handlebars-template"> 
 
    <div> 
 
     <h1 style ="color:green">{{title1}}</h1> 
 
     <h2 style ="color:blue">{{body1}}</h2> 
 
    </div> 
 
</script> 
 

 
</body> 
 
</html>

あなたはjQueryの古代のバージョンを使用している：私が作った唯一の本当の変更はglobal.jsインラインを置くこととjQueryのバージョンを近代化することだった - ここでは、コードです。私はより最近の何かに移動するだろう - 少なくとも2.x。もはやv1.xを使用する理由はありません。

出典

2017-03-05 22:23:13 rasmeister

何らかの理由で私のページがまだ空白になっていますが、これは長時間の撮影ですが、それを妨害している可能性のあることは分かりますか？私はnode.js mongodb expressとhandlebarsを使用しています – user

あなたの環境で自分のコードを実行すると、空白のページが表示されますか？ – rasmeister

ええ、ボタンを除いて完全に空白です。私はそれを理解することはできませんが、レンダリングする前にコンソールにログオンすればコンテキストをキャプチャできます。ページをレンダリングした後、コンテキストはどこかに失われるようです – user

ハンドルバーテンプレートにデータを渡すことができません

答えて

関連する問題