渲染 Handlebars 模板时出现错误“unexpected char '#'”答案

【问题标题】：Error "unexpected char '#' " with rendering Handlebars template渲染 Handlebars 模板时出现错误“unexpected char '#'”
【发布时间】：2020-07-25 01:09:29
【问题描述】：

我有一个来自 CS50 讲座的简单 100% 工作代码，它代表了 Handlebars 的用法。这里是：

<html>
      <head>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
          <script id="result" type="text/template">
              <li>
                  You rolled:

                  {{#each values}}
                      <img alt="{{ this }}" title="{{ this }}" src="img/{{ this }}.png">
                  {{/each}}
                  (Total: {{ total }})

              </li>
          </script>
          <script>

              // Template for roll results
              const template = Handlebars.compile(document.querySelector('#result').innerHTML);

              document.addEventListener('DOMContentLoaded', () => {
                  document.querySelector('#roll').onclick = ()  => {

                      // Generate random rolls.
                      const counter = parseInt(document.querySelector('#counter').value);
                      const rolls = [];
                      let total = 0;
                      for (let i = 0; i < counter; i++) {
                          const value = Math.floor(Math.random() * 6) +  1;
                          rolls.push(value);
                          total += value;
                      };

                      // Add roll results to DOM.
                      const content = template({'values': rolls, 'total': total});
                      document.querySelector('#rolls').innerHTML += content;
                  };
              });
          </script>
      </head>
      <body>
          <input id="counter" type="number" placeholder="Number of Rolls" min="1" value="1">
          <button id="roll">Roll</button>
          <ul id="rolls">
          </ul>
      </body>
  </html>

当我尝试在浏览器中渲染它时，我得到“jinja2.exceptions.TemplateSyntaxError: unexpected char '#'”。

显然问题出在我的电脑端。但是如何解决呢？

我在网上搜索过这个问题。我发现的一件有趣的事情是它以某种方式与“我的服务器端模板引擎”相关联。这是一个线程 - https://github.com/wycats/handlebars.js/issues/269 。这里的另一个人 (https://github.com/wycats/handlebars.js/issues/1263) 说他有类似的错误是因为 Pagespeed。

我如何了解安装了哪个“模板引擎”？我有一个普通的 Mac 和虚拟环境中的项目。

可能是什么问题？

【问题讨论】：

您如何提供此 HTML 文件？看起来有一个配置为使用 Jinja2 模板的后端。
我正在使用 Flask 来运行这个 HTML
啊。那么你的问题与 JavaScript 或 Handlebars 无关。您的问题是如何防止 Flask 的 Jinja2 模板引擎执行您的部分模板。一些有用的链接：jinja.palletsprojects.com/en/2.11.x/templates/#escaping、stackoverflow.com/q/25359898/3397771、stackoverflow.com/q/18070468/3397771
你解决了我的问题，谢谢！
不客气。

标签： javascript handlebars.js

【解决方案1】：

这是因为 jinja2 将花括号读取为语法（作为变量或块代码）。因此，您必须在 HTML 代码中转义 jinja。

这样做的方法如下；

最简单的方法是使用变量表达式来输出文字变量分隔符 ({{)。

{{ '{{' }}

对于较大的部分，将块标记为原始是有意义的。例如，要在模板中包含把手语法，您可以使用这个 sn-p：

{% raw %}
   <ul>
   {{#each vlaues}}
       <li>{{ this }}</li>
   {{/endeach}}
   </ul>
{% endraw %}

更多信息请查看enter link description here

【讨论】：