0

我有一个来自 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 和项目。

可能是什么问题？

4

1 回答 1

0

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

这样做的方法如下；

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

{{ '{{' }}

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

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

有关更多信息，请在此处输入链接描述

于 2020-07-24T17:09:29.827 回答