Javascript 把手模板不显示上下文数据_Javascript_Node.js_Templates_Handlebars.js

Javascript 把手模板不显示上下文数据

javascript node.js templates

Javascript 把手模板不显示上下文数据,javascript,node.js,templates,handlebars.js,Javascript,Node.js,Templates,Handlebars.js,我正在尝试使用Node express和Handlebar作为模板引擎构建一个测验应用程序我有以下模板： <div id="quiz"> <div class="container"> <div class="row" id="quiz-header-row"> <div> <div id="question-title"></div>

我正在尝试使用Node express和Handlebar作为模板引擎构建一个测验应用程序

我有以下模板：

<div id="quiz">
    <div class="container">
         <div class="row" id="quiz-header-row"> 
             <div>
                <div id="question-title"></div>
             </div>
         </div>
         <div class="row" id="quiz-choices-row"> 
            <div id="choices"></div>
         </div>
         <div class="row" id="quiz-footer-row"> 
            <button id="quiz-next-btn" class="btn btn-success">Next</button>
         </div>
    </div>
</div>

<!-- Template  -->
<script id="choices-template" type="text/x-handlebars-template">
<div>\{{choices}}</div>
    <div>
        {{#each choices}}
        <a href="#"">{{this}}</a>
        {{/each}}
    </div>
</script>

我面临的问题是每个块都没有显示任何内容。{{each choices}}前面的反斜杠不能像上面的例子那样使用，因为服务器抛出服务器内部错误：500

这是控制台记录的上下文：

下面的小提琴根据需要工作，不需要反斜杠

但是，我在使用Node的项目中运行的完全相同的代码不会显示每个块中写入的任何内容

我在server express Handlebar和客户端上都有把手。考虑到结果，我做错事了

先谢谢你

编辑：通过预编译外部文件中的模板并将其作为脚本包含在视图中来修复。

尝试以下操作：

{{#each choices as |choice|}}
    <a href="#">{{choice}}</a>
{{/each}}

并确保选项按预期填充。

我只是尝试执行您的代码。在打印数据时，我使用了jquery-2.2.1和Handlebar 2.0.0

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>    
   <script id="address-template" type="text/x-handlebars-template">
     <div>
        {{#each choices}}
          <a href="#"">{{this}}</a>
        {{/each}}
     </div>
   </script>
   <!--Your new content will be displayed in here-->
   <div class="content-placeholder"></div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>

   <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js">
 </script>
   <script>          

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

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

      // Define our data object
      var context={
        choices: ["choice1","choice2","choice3"]
      };

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

      // Add the compiled html to the page
      $('.content-placeholder').html(theCompiledHtml);
      });
   </script>
  </body>
</html>

这是一个很好的例子，我也试过使用Handlebar 4.0.3和jquery 3.1.1，它运行得很好。

choices数组填充了控制台内部的日志上下文renderChoices函数显示预期结果。不幸的是，即使按照您建议的方式编写，它也不会显示任何内容。谢谢你。你用的是什么型号的车把？此外，如果您可以发布您从日志中看到的可能有用的信息，Handlebar版本为4.0.5“每个”中是否有任何内容？像一个空的html标签？你试过没有“\{{choices}}”的吗？您是否看到其他错误？信息越多越好！如果你能制作一个样本JSFIDLE，那将是最好的。救生衣。工作得很有魅力。

{{#each choices as |choice|}}
    <a href="#">{{choice}}</a>
{{/each}}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>    
   <script id="address-template" type="text/x-handlebars-template">
     <div>
        {{#each choices}}
          <a href="#"">{{this}}</a>
        {{/each}}
     </div>
   </script>
   <!--Your new content will be displayed in here-->
   <div class="content-placeholder"></div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>

   <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js">
 </script>
   <script>          

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

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

      // Define our data object
      var context={
        choices: ["choice1","choice2","choice3"]
      };

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

      // Add the compiled html to the page
      $('.content-placeholder').html(theCompiledHtml);
      });
   </script>
  </body>
</html>