Question

我正在尝试使用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 choices}} 之前的反斜杠不能像上面的示例中那样使用，因为服务器会抛出＆＃34;服务器内部错误：500＆＃34;。

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

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

fiddle

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

我在服务器（快速把手）和客户端都有把手。考虑到结果，我做错了。

提前谢谢。

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

Answer 1

尝试这样的事情：

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

并确保按预期填充choices。

Answer 2

我只是尝试执行你打印数据的代码，我使用过jquery-2.2.1和把手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它运行正常。

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

2 个答案: