Flask Jinja2 不渲染引导轮播答案

【问题标题】：Flask Jinja2 not rendering bootstrap carouselFlask Jinja2 不渲染引导轮播
【发布时间】：2021-06-26 13:04:36
【问题描述】：

我想渲染引导轮播和其他嵌套的 html 元素。我是 Jinja2 的新手，在互联网上没有看到任何关于这个特定问题的内容。

这是我的蟒蛇

@app.route("/")
def index():
    r = requests.get(os.environ['AWS_Product_URL'])
    prods = list(json.loads(r.text))
    return render_template("index.html", my_products=prods)

这个有效

{% for key in my_products %}
    <p><strong>{{ key["name"] }}</strong><span>{{ key["price"] }}</span></p>
{% endfor %}

但是这个没有

{% for key in my_products %}
     <div class="carousel-item">
         <p><strong>{{ key["name"] }}</strong><span>{{ key["price"] }}</span></p>
     </div>
{% endfor %}

我采用了一个现有的模板并试图使这个模板动态化。类存在。我很困惑为什么 Jinja2 在 html 中的嵌套项遇到问题。

为什么？？

【问题讨论】：

标签： python flask jinja2

【解决方案1】：

您可能只是缺少将活动类添加到轮播项目

引导轮播项目至少需要一个活动元素，其他所有元素都将被隐藏。

所以尝试添加类似的东西

{% for key in my_products %}
     <div class="carousel-item {% if loop.index == 1 %}active{% endif %}">
         <p><strong>{{ key["name"] }}</strong><span>{{ key["price"] }}</span></p>
     </div>
{% endfor %}

以防万一，这是我测试过的模板，假设 my_products 不为空，它应该可以正常工作。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col">
          <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner text-center">
              {% for key in my_products %}
              <div class="carousel-item {% if loop.index == 1 %}active{% endif %}">
                <p><strong>{{ key["name"] }}</strong><span>{{ key["price"] }}</span></p>
              </div>
              {% endfor %}
            </div>
            <button class="carousel-control-prev bg-dark" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next bg-dark" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Next</span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>
</html>

【讨论】：