渲染 Handlebars 模板时出现“意外字符 '#'”错误

Question

I have a simple 100% working code from CS50 lecture, which represents the usage of Handlebars.我有一个来自 CS50 讲座的简单 100% 工作代码，它代表了 Handlebars 的用法。 Here it is:这里是：

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

When I try to render it in my browser I get "jinja2.exceptions.TemplateSyntaxError: unexpected char '#'".当我尝试在浏览器中呈现它时，我得到“jinja2.exceptions.TemplateSyntaxError：意外字符'#'”。

Obviously the problem is on my computer side.显然问题出在我的电脑端。 But how to fix it?但是如何修复呢？

I have searched for this problem in the web.我在网上搜索过这个问题。 One interesting thing I catch was that it is somehow connected with "my server side templating engine".我发现一件有趣的事情是它以某种方式与“我的服务器端模板引擎”有关。 Here is a thread - https://github.com/wycats/handlebars.js/issues/269 .这是一个线程 - https://github.com/wycats/handlebars.js/issues/269 。 Another guy here ( https://github.com/wycats/handlebars.js/issues/1263 ) says he had similar error because of Pagespeed.这里的另一个人（ https://github.com/wycats/handlebars.js/issues/1263 ）说他因为 Pagespeed 也有类似的错误。

How can I understand which "templating engine" is installed?我如何了解安装了哪个“模板引擎”？ I have an ordinary Mac and project in virtual environment.我在虚拟环境中有一台普通的 Mac 和项目。

What might be the problem?可能是什么问题？

Answer 1

This happens because jinja2 reads curly braces as syntax (as variables or block codes).发生这种情况是因为 jinja2 将花括号读取为语法（作为变量或块代码）。 So, You have to escape jinja in your HTML code.因此，您必须在 HTML 代码中转义 jinja。

the methods to do so are following;这样做的方法如下；

The easiest way is to output a literal variable delimiter ({{) is by using a variable expression.最简单的方法是使用变量表达式输出文字变量分隔符 ({{)。

{{ '{{' }}

For bigger sections, it makes sense to mark a block raw.对于较大的部分，将块标记为 raw 是有意义的。 For example, to include handlebars syntax in a template, you can use this snippet:例如，要在模板中包含把手语法，您可以使用以下代码段：

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

For more info check enter link description here有关更多信息，请在此处输入链接描述

渲染 Handlebars 模板时出现“意外字符 '#'”错误

问题描述

1 个解决方案

解决方案1
0 2020-07-24 17:09:29

渲染 Handlebars 模板时出现“意外字符 &#39;#&#39;”错误

问题描述

1 个解决方案

解决方案1 0 2020-07-24 17:09:29

渲染 Handlebars 模板时出现“意外字符 '#'”错误

解决方案1
0 2020-07-24 17:09:29