Error "unexpected char '#' " with rendering Handlebars template

Question

I have a simple 100% working code from CS50 lecture, which represents the usage of 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 '#'".

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 . Another guy here (https://github.com/wycats/handlebars.js/issues/1263) says he had similar error because of Pagespeed.

How can I understand which "templating engine" is installed? I have an ordinary Mac and project in virtual environment.

What might be the problem?

How are you serving this HTML file? It looks like there is a back-end that is configured to use Jinja2 templates. — 76484, Apr 01 '20 at 19:41
Ah. Well then your problem has nothing to do with JavaScript or Handlebars. Your problem is how to prevent Flask's Jinja2 template engine from executing parts of your template. Some helpful links: https://jinja.palletsprojects.com/en/2.11.x/templates/#escaping, https://stackoverflow.com/q/25359898/3397771, https://stackoverflow.com/q/18070468/3397771 — 76484, Apr 02 '20 at 11:18

score 0 · Answer 1 · answered Jul 24 '20 at 17:09

This happens because jinja2 reads curly braces as syntax (as variables or block codes). So, You have to escape jinja in your HTML code.

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

Error "unexpected char '#' " with rendering Handlebars template

1 Answers1