將渲染把手發布到HTML

Question

當我用html渲染我的車把模板時，看起來實際上是在跳過“車把”部分的填寫。 我實質上是在打印帶有標題和內容的消息，並且使用“！each”助手來顯示所有消息。 我最初以為是因為這是因為它轉義了周圍的html，所以我嘗試在每個零件上使用三重手柄棒{{{但是，使用帶有三重隱藏件的每個輔助工具卻給了我一個錯誤。 我可能會錯誤地使用車把嗎？

我用來呈現HTML和我的車把模板的打字稿如下：

 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>

當我遇到這樣的問題時，我會消除不同的事情，直到我變得清楚或刪除的東西解決了問題。 現在我已經隔離了問題所在。 在您的情況下，問題可能是正在傳遞數據，因此請進行驗證。 然后嘗試剝離您的助手，看看它們是否引起問題。

將渲染把手發布到HTML

問題描述

1 個解決方案

解決方案1
0 2017-03-12 01:35:10

將渲染把手發布到HTML

問題描述

1 個解決方案

解決方案1 0 2017-03-12 01:35:10

解決方案1
0 2017-03-12 01:35:10