Fehler beim Rendern von Lenkern zu HTML

Question

Wenn ich meine Lenkervorlage in HTML rendere, sieht es so aus, als ob sie im Wesentlichen den "Griffleisten" -Abschnitt ausfüllt. Ich drucke im Wesentlichen Nachrichten mit einem Titel und Inhalt, und ich verwende einen "! Jeder" Helfer, um alle meine Nachrichten anzuzeigen. Ich dachte ursprünglich, dass es daran lag, dass es dem HTML-Code entkam, also versuchte ich es mit einem dreifachen Griffbalken {{{an jedem Teil, aber die Verwendung jedes Helfers mit dem Triple-Stash gab mir einen Fehler. Benutze ich den Lenker möglicherweise falsch?

das Typoskript ich verwenden, um die HTML und meinen Lenker Vorlage zu machen ist unten:

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

Okay, dann ist es zu Ihrer Vorlage wahrscheinlich die Daten in der richtigen Form nicht vorgesehen ist . Hier ist ein Arbeits-Snippet (mit nicht-essentiellen Elementen). Die Daten, die an Ihre Vorlage refreshData übergeben werden, müssen ein Array sein. Stellen Sie sicher, dass es sich nicht um ein Objekt handelt, das ein Array enthält.

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

Wenn ich mit Fragen wie diese konfrontiert bin, beseitigen wir verschiedene Dinge, bis entweder ich Klarheit oder etwas bekomme ich das Problem behebt entfernt. Jetzt habe ich isoliert, wo das Problem liegt. In Ihrer Situation ist das Problem wahrscheinlich, dass die Daten weitergegeben werden, überprüfen Sie dies. Versuchen Sie dann, Ihre Helfer auszugraben, um zu sehen, ob sie Probleme verursachen.