时间戳

首页 > 解决方案 > 如何在 Jinja 2 占位符中包含 javascript 占位符？

javascript - 如何在 Jinja 2 占位符中包含 javascript 占位符？

问题描述

我正在尝试将此功能嵌入到我的 Flask 应用程序中 --> Scattered Polaroid Gallery

所以，我有一个模板（Jinja2），我在其中显示一堆图像。要访问图像，我正在使用 Flask 的 url_for() 命令，该命令使用符号 ---> {{}}。在应该动态加载图像的 Javascript 文件中，使用了相同的符号，即----> {{}}。我想知道如何将 Javascript 的 {{}} 与 Flask/Jinja 2 {{}} 一起使用

下面是用实际文件名替换 {{img}} 的每个实例的 Javascript 函数。

function addPhotos() {
  var template = select('#wrap').innerHTML;
  var html = [];
  var nav = [];
  for (i=0; i<1; i++) {
    
    var _html = template.replace('{{index}}', i)
    .replace('img', data[i].img)
    .replace('{{caption}}', data[i].caption)
    .replace('{{desc}}', data[i].desc);
    html.push(_html);
    nav.push('<span id="nav_'+i+'" class="i" onclick ="turn(select(\'#photo_'+i+'\'))">&nbsp;</span>');
  }
  html.push('<div class="nav">'+nav.join('')+'</div>');
  select('#wrap').innerHTML = html.join('');
  sort(random([0, data.length]));
}
<div class="mainPage" id="fullpage">
    <div class="first section">
        <div class="wrap" id="wrap">
            <div class="photo photo_front" id="photo_{{index}}" onclick="turn(this)">
                <div class="photo-wrap">
                    <div class="side side-front">
                        <p class="image">
                            <!-- <img src="photo/{{img}}"> -->
                            <img src="{{ url_for('static',filename='photo/{{img}}') }}">
                             <!-- .replace('{{img}}', data[i].img) -->
                        </p>
                        <p class="caption">{{caption}}</p>
                        
                    </div>
                    <div class="side side-back">
                        <p class="desc">{{desc}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

以上是同时使用 Javascript 和 Jinja2 {{}} 的模板。

Chrome 调试控制台中显示以下错误。

错误

下面是我的 Flask 应用程序的文件夹结构 -

烧瓶应用

PS - 我尝试使用图像文件夹的相对路径而不是 url_for() 函数， <img src="../static/photo/{{img}}">但它也失败了。

在这种情况下，显示以下错误 -

错误2

请帮忙。

编辑 -

使用后&quot;，出现以下错误。

新的错误信息

标签： javascriptjqueryhtmlflaskjinja2

解决方案

您需要使用引号转义大括号。由于您需要在 html 属性中执行此操作，因此src您还必须转义这些引号，因为 HTML 属性中已经使用了引号，并且实现此目的的方法是使用&quot;

看看下面的img标签src属性。如果您想转义不属于 HTML 属性的 Jinja 花括号，则可以使用 jinja{% raw %}块（请参阅我是如何包围的{{caption}}）

<div class="mainPage" id="fullpage">
    <div class="first section">
        <div class="wrap" id="wrap">
            <div class="photo photo_front" id="photo_{{index}}" onclick="turn(this)">
                <div class="photo-wrap">
                    <div class="side side-front">
                        <p class="image">

                            <img src="{{ url_for('static',filename='photo/&quot;{{img}}&quot;') }}">

                        </p>
                        <p class="caption">{% raw %}{{'caption'}}{% endraw %}</p>

                    </div>
                    <div class="side side-back">
                        <p class="desc">{% raw %}{{desc}}{% endraw %}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

推荐阅读