javascript - 这段 JavaScript 中的 '#' 是做什么的？

Question

我有一些从网站上复制的 javascript，我正尝试在 Flask 项目中使用它，但出现错误。我想知道:这段代码是做什么的，为什么当我尝试用 Flask 部署它时它不起作用？具体来说，“#”的作用是什么？为什么 Jinja 说这是一个意想不到的字符？

代码:

<div class="lyrics">
    {{#each lyrics}}<span class="{{highlight this}}" data-index="
    {{@key}}" data-timecode="{{timecode}}" data-classed="{{classed}}">
    {{{text}}}</span>{{{breakspace linebreak space}}}{{/each}}
    <span class="song-meta">
    "{{title}}" on "{{album}}"
</span>
</div>`

使用flask部署时的错误:

jinja2.exceptions.TemplateSyntaxError: unexpected char '#' at 37568

这是一段更大的代码的一部分，看起来像这样:

<div class="lyrics-box">
  <div class="lyrics">

    {{#each lyrics}}<span class="{{highlight this}}" data-index="{{@key}}" data-timecode="{{timecode}}" data-classed="{{classed}}">{{{text}}}</span>{{{breakspace linebreak space}}}{{/each}}
    <span class="song-meta">
    "{{title}}" on "{{album}}"
  </span>
  </div>
</div>
<div class="lyrics-meta mobi-meta">
    <span class="song-title">{{artist}} performing "{{title}}" on "{{album}}"</span>
</div>
<div class="lyrics-meta">
  <img class="hedcut" src="//graphics.wsj.com/hamilton/img/{{hedcut}}.png" alt="">
  <span class="song-title">{{artist}}</span>
  <span class="album"></span>
  <span class="view-lyrics"><span class="view">View</span><span class="hides">Hide</span> lyrics</span>
</div>

<div class="clearfix"></div>

完整的堆栈跟踪如下:

Traceback (most recent call last):
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/flask/app.py", line 1997, in __call__
return self.wsgi_app(environ, start_response)
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/flask/app.py", line 1985, in wsgi_app
response = self.handle_exception(e)
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/flask/app.py", line 1540, in handle_exception
reraise(exc_type, exc_value, tb)
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/flask/_compat.py", line 33, in reraise
raise value
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/flask/app.py", line 1982, in wsgi_app
response = self.full_dispatch_request()
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/flask/app.py", line 1614, in full_dispatch_request
rv = self.handle_user_exception(e)
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/flask/app.py", line 1517, in handle_user_exception
reraise(exc_type, exc_value, tb)
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/flask/_compat.py", line 33, in reraise
raise value
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/flask/app.py", line 1612, in full_dispatch_request
rv = self.dispatch_request()
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/flask/app.py", line 1598, in dispatch_request
return self.view_functions[rule.endpoint](**req.view_args)
File "/Users/timholdsworth/code/rhymes/flask-boilerplate/app.py", line 46, in home
return render_template('layouts/main.html')
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/flask/templating.py", line 133, in render_template
return _render(ctx.app.jinja_env.get_or_select_template(template_name_or_list),
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/jinja2/environment.py", line 869, in get_or_select_template
return self.get_template(template_name_or_list, parent, globals)
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/jinja2/environment.py", line 830, in get_template
return self._load_template(name, self.make_globals(globals))
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/jinja2/environment.py", line 804, in _load_template
template = self.loader.load(self, name, globals)
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/jinja2/loaders.py", line 125, in load
code = environment.compile(source, name, filename)
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/jinja2/environment.py", line 591, in compile
self.handle_exception(exc_info, source_hint=source_hint)
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/jinja2/environment.py", line 780, in handle_exception
reraise(exc_type, exc_value, tb)
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/jinja2/_compat.py", line 37, in reraise
raise value.with_traceback(tb)
File "/Users/timholdsworth/code/rhymes/flask-boilerplate/templates/layouts/main.html", line 731, in template
{{#each lyrics}}<span class="{{highlight this}}" data-index="{{@key}}" data-timecode="{{timecode}}" data-classed="{{classed}}">{{{text}}}</span>{{{breakspace linebreak space}}}{{/each}}
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/jinja2/environment.py", line 497, in _parse
return Parser(self, source, name, encode_filename(filename)).parse()
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/jinja2/parser.py", line 901, in parse
result = nodes.Template(self.subparse(), lineno=1)
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/jinja2/parser.py", line 874, in subparse
next(self.stream)
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/jinja2/lexer.py", line 359, in __next__
self.current = next(self._iter)
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/jinja2/lexer.py", line 562, in wrap
for lineno, token, value in stream:
File "/anaconda/envs/flask3.5/lib/python3.5/site-packages/jinja2/lexer.py", line 739, in tokeniter
name, filename)
jinja2.exceptions.TemplateSyntaxError: unexpected char '#' at 37568

Answer 1

Jinja2 使用大括号来分隔它自己的模板变量，所以它会尝试解释你的 JavaScript {{#each}}，但失败了，因为 # 无效.

您可以将此代码包装在 {% raw %} 和 {% endraw %} 中以告诉 jinja2 不要解释它:

<div class="lyrics">
{% raw %}
{{#each lyrics}}
{% endraw %}
<span class="{{highlight this}}" data-index="
{{@key}}" data-timecode="{{timecode}}" data-classed="{{classed}}">
{{{text}}}</span>{{{breakspace linebreak space}}}
{% raw %}
{{/each}}
{% endraw %}
<span class="song-meta">
"{{title}}" on "{{album}}"
</span>
</div>`