Issues rendering handlebars to HTML

Question

When I render my handlebars template in html, it looks like it's essentially skipping filling in the "handle bars" portion. I'm essentially printing messages with a title and content, and I'm using a "!each" helper to display all of my messages. I originally thought it was because it was because it was escaping the html around it, so I tried using a triple handle bar {{{ on each part however using the each helper with the triple stash gave me an error. Am I possibly using the handlebars incorrectly?

the typescript I used to render the HTML and my handlebars template is below:

 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, then it is likely the data provided to your template is not in the correct form. Here's a working snippet (with non-essentials stripped out). The data passed to your refreshData template must be an array. Make sure it isn't an object containing an array.

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

When I am faced with issues like this, I eliminate different things until I either get clarity or something I removed fixes the problem. Now I have isolated where the problem lies. In your situation, the issue is likely the data being passed so verify that. Then try stripping out your helpers to see if they are causing issues.

Issues rendering handlebars to HTML

Question

1 answers

solution1
0 2017-03-12 01:35:10

Issues rendering handlebars to HTML

Question

1 answers

solution1 0 2017-03-12 01:35:10

solution1
0 2017-03-12 01:35:10