ハンドルバーをHTMLにレンダリングする問題

Question

ハンドルバーテンプレートをhtmlでレンダリングすると、基本的に「ハンドルバー」の部分を読み飛ばしているように見えます。私は本質的にタイトルと内容でメッセージを印刷しています。私はすべてのメッセージを表示するために "！each"ヘルパーを使用しています。私はもともとそれがhtmlをエスケープしていたからだと思っていたので、トリプルハンドルバーを使用しようとしました。{{{それぞれのヘルパーを三重隠しにしてエラーを出しました。おそらくハンドルバーを間違って使用していますか？

私はHTMLをレンダリングするために使用し、私のハンドルバーテンプレートは以下の通りですtypescriptです：

public static refreshData(data: any) { 
 
     $("#indexMain").html(Handlebars.templates['main.hbs'](data)); 
 

 
     //helper function for upvote button 
 
     Handlebars.registerHelper('getUButton', function (id) { 
 
      id = Handlebars.escapeExpression(id); 
 

 
      return new Handlebars.SafeString(
 
       "<button type='button' class='btn btn-default up-button' id='u" + id + "'>Upvote</button>" 
 
      ); 
 
     }); 
 

 
     //helper function for downvote button 
 
     Handlebars.registerHelper("getDButton", function (id) { 
 
      id = Handlebars.escapeExpression(id); 
 

 
      return new Handlebars.SafeString(
 
       "<button type='button' class='btn btn-default down-button' id='d" + id + "'>DownVote</button>" 
 
      ); 
 
     }); 
 

 
     // Grab the template script 
 
     var theTemplateScript = $("#main-template").html(); 
 

 

 
     // Compile the template 
 
     var theTemplate = Handlebars.compile(theTemplateScript); 
 

 
     //get messages from server and add them to the context 
 
     // This is the default context, which is passed to the template 
 

 
     var context = { 
 
      messages: data 
 
     } 
 
     console.log("context:") 
 
     console.log(context); 
 

 
     // Pass data to the template 
 
     var theCompiledHtml = theTemplate(context); 
 

 
     console.log(theCompiledHtml); 
 

 
     // Add the compiled html to the page 
 
     $("#messages-placeholder").html(theTemplate(context)); 
 

 

 
     //add all click handlers 
 
     //get all buttons with id starting with u and set the click listerer 
 
     $(".up-button").click((event) => { 
 
      var id = $(event.target).attr("id").substring(1); 
 
      main.upvote(id) 
 
     }); 
 

 

 
     //get all buttons with id starting with d and set the click listerer 
 
     $(".down-button").click((event) => { 
 
      var id = $(event.target).attr("id").substring(1); 
 
      main.downvote(id) 
 
     }); 
 
    }

 
<script id="main-template" type="text/x-handlebars-template"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h3 class="panel-title">Current Messages</h3> 
 
     </div> 
 
     <div class="panel-body"> 
 
      <div class="list-group" id="message-list"> 
 
       <!-- for each message, create a post for it with title, content, upvote count, and upvote button --> 
 
       {{#each messages}} 
 
        <li class="list-group-item"> 
 
         <span class="badge">Vote Count: {{likeCount}}</span> 
 
         <h4 class="list-group-item-heading">{{title}}</h4> 
 
         <p class="list-group-item-text">{{content}}</p> 
 
         <div class="btn-group btn-group-xs" role="group" aria-label="upvote"> 
 
          {{getUButton id}} 
 
         </div> 
 
         <div class="btn-group btn-group-xs" role="group" aria-label="downvote"> 
 
          {{getDButton id}} 
 
         </div> 
 
        </li> 
 
       {{/each}} 
 
      </div> 
 
     </div> 
 
    </div> 
 
</script> 
 
<div id="messages-placeholder"></div> 
 
<div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h3 class="panel-title">Post New Message</h3> 
 
    </div> 
 
    <div class="input-group"> 
 
     <span class="input-group-addon">Title</span> 
 
     <input id="newTitle" type="text" class="form-control" placeholder="Title" aria-describedby="newTitle"> 
 
    </div> 
 
    <div class="input-group"> 
 
     <span class="input-group-addon">Message</span> 
 
     <input id="newMessage" type="text" class="form-control" placeholder="Message" aria-describedby="newMessage"> 
 
    </div> 
 
    <div class="btn-group" role="group" aria-label="create"> 
 
     <button type="button" class="btn btn-default" id="postNewMessage">Post Message</button> 
 
    </div> 
 
    <span class="label label-danger" id="incompleteAcc"></span> 
 
</div>

Answer 1

さて、それはあなたのテンプレートに提供されたデータが正しい形式ではない可能性があります。ここでは働くスニペット（非本質的なものを取り除いたもの）です。 refreshDataテンプレートに渡されるデータは配列でなければなりません。配列を含むオブジェクトでないことを確認してください。私はこのような問題に直面しています

<!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 src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script> 
 
</head> 
 
<body> 
 

 
<script> 
 
    let refreshData = (data) => { 
 
     // Grab the template script 
 
     var theTemplateScript = $("#main-template").html(); 
 

 
     // Compile the template 
 
     var theTemplate = Handlebars.compile(theTemplateScript); 
 

 
     //get messages from server and add them to the context 
 
     // This is the default context, which is passed to the template 
 
     var context = { 
 
      messages: data 
 
     }; 
 
     console.log("context:", context); 
 

 
     // Add the compiled html to the page 
 
     $("#messages-placeholder").html(theTemplate(context)); 
 
    } 
 

 
    $(() => { 
 
     var data = [ 
 
      { likeCount: 3, title: 'My Title', content: 'Some content'}, 
 
      { likeCount: 0, title: 'My 2nd Title', content: 'Some other content'} 
 
     ]; 
 
     refreshData(data); 
 
    }) 
 

 

 
</script> 
 

 
<script id="main-template" type="text/x-handlebars-template"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h3 class="panel-title">Current Messages</h3> 
 
     </div> 
 
     <div class="panel-body"> 
 
      <div class="list-group" id="message-list"> 
 
       <!-- for each message, create a post for it with title, content, upvote count, and upvote button --> 
 
       {{#each messages}} 
 
       <li class="list-group-item"> 
 
        <span class="badge">Vote Count: {{likeCount}}</span> 
 
        <h4 class="list-group-item-heading">{{title}}</h4> 
 

 
        <p class="list-group-item-text">{{content}}</p> 
 
       </li> 
 
       {{/each}} 
 
      </div> 
 
     </div> 
 
    </div> 
 
</script> 
 

 
<div id="messages-placeholder"></div> 
 
<div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h3 class="panel-title">Post New Message</h3> 
 
    </div> 
 
    <div class="input-group"> 
 
     <span class="input-group-addon">Title</span> 
 
     <input id="newTitle" type="text" class="form-control" placeholder="Title" aria-describedby="newTitle"> 
 
    </div> 
 
    <div class="input-group"> 
 
     <span class="input-group-addon">Message</span> 
 
     <input id="newMessage" type="text" class="form-control" placeholder="Message" aria-describedby="newMessage"> 
 
    </div> 
 
    <div class="btn-group" role="group" aria-label="create"> 
 
     <button type="button" class="btn btn-default" id="postNewMessage">Post Message</button> 
 
    </div> 
 
    <span class="label label-danger" id="incompleteAcc"></span> 
 
</div> 
 

 
</body> 
 
</html>

は、私は明快さを得るいずれか、または何か私は問題の修正を削除するまで、さまざまなものを排除します。今私はどこに問題があるのか​​を孤立させました。あなたの状況では、問題はデータが渡されている可能性が高いため、確認してください。その後、ヘルパーを取り除き、問題を引き起こしているかどうかを確認してください。