车把模板不显示上下文数据答案

【问题标题】：Handlebars template not displaying context data车把模板不显示上下文数据
【发布时间】：2017-05-20 09:54:22
【问题描述】：

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

我有以下模板：

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

如果我不在花括号前使用反斜杠，车把会显示一个空字符串，因此我不能这样写：

<div>{{choices}}</div>

在车把官网上找到我必须用的：\{{choices}}。

用数据填充模板的javascript：

renderChoices: function() {
    var template = Handlebars.compile($('#choices-template').html());

    var context = {
        // array of quiz item choices
        choices: Quiz.questions[Quiz.currentIndex].choices
    };

    $('#choices').html(template(context));
},

我面临的问题是不显示任何内容的 #each 块。 {{#each choice}} 之前的反斜杠不能像上面的例子那样使用，因为服务器会抛出“服务器内部错误：500”。

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

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

fiddle.

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

我在服务器（express-handlebars）和客户端都有 Handlebars。考虑到结果，我做错了事。

提前谢谢你。

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

【问题讨论】：

标签： javascript node.js templates handlebars.js

【解决方案1】：

试试这样的：

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

并确保choices 的填充符合您的预期。

【讨论】：

choices 数组已填充（在“renderChoices”函数内的控制台中记录上下文显示预期结果）。不幸的是，即使按照您建议的方式编写它也不会显示任何内容。还是谢谢你。
您使用的是什么版本的车把？另外，如果您可以发布您从日志中看到的内容，可能会有所帮助
Handlebars 版本为 4.0.5
“每个”内部是否有任何渲染内容？（就像一个空的 html a 标签？）你试过没有 '
\{{choices}}
' 吗？您是否看到任何其他错误？信息越多越好！如果您可以制作一个示例 jsfiddle，那将是最好的。
救命稻草。像魅力一样工作。

【解决方案2】：

我只是尝试执行打印数据的代码，我使用了 jquery-2.2.1 和 handlebars 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>

这是一个 link 给 plunker，我也尝试使用把手 4.0.3 和 jquery 3.1.1 它运行良好。

【讨论】：