使用 flask jinja2 和 bootstrap 模板来回传递 url 和 ID

Question

Flask/jinja2/bootstrap 菜鸟在这里。我正在使用 flask、jinja2 和 bootstrap 模板制作一个基本网页。使用下面的 {% for product in products %}，我试图显示多个产品面板（在本例中来自亚马逊），我正在尝试使用 {{product['imgurl']}}在每个面板中分配图像 url。除此之外，由于使用 {% for product in products %} 创建了多个按钮，我还想检测单击了哪个按钮，并以某种方式将其传递回单击按钮时调用的下一页, 两个问题详述如下:

   <div class="container">
    <div class="starter-template">
     <h1><span class="label label-primary">Here are the top results:</span></h1>

     {% for product in products %}
      <div class="row">
      <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
          <img src="{{product['imgurl']}}" alt="...">
          <div class="caption">
            <h3>{{product['name']}}</h3>
            <p>{{product['blurb']}}</p>
            <p><a href="/output2" class="btn btn-primary" role="button"><element id={{ product['ASIN']}}>Choose Set</a></p>
          </div>
        </div>
      </div>
      {% endfor %}
     </div>
     <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
     <script src="static/js/bootstrap.min.js"></script>
   </div> <!-- /.container-->

我希望我的 html 代码使用 product['imgurl'] 变量从外部网站获取图像，我知道如何为单个 'img src='，但不是如何在 for 循环中执行。
第二个问题是获取被点击按钮的ID。正如您从上面的代码中看到的，我正在使用 "element id={{ product['ASIN']}}" 为每个按钮分配一个 ID，但是我如何将被单击按钮的 'id' 集成到生成的 "a href=" 中？ " 调用，所以 'id 被传递到下一页？

我不确定这是否可以在 flask/jinja2/bootstrap 框架内完成。如果可以的话，任何关于此的 help/solution 将不胜感激，到目前为止我已经花了很多时间搜索这个，但我一直无法找到明确的答案或方法。谢谢..

Answer 1

对于问题 1，我认为你可以使用点符号而不是索引字典。

{% for product in products %}
    <div class="row">
      <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
          <img src="{{product.imgurl}}" alt="...">
          <div class="caption">
            <h3>{{product.name}}</h3>
            <p>{{product.blurb}}</p>
            <p>
                <a href="/output2" class="btn btn-primary" role="button">
                    <element id={{ product.ASIN}}>Choose Set</a>
            </p>
          </div>
        </div>
    </div>
{% endfor %}

对于第二个问题和获取元素的id，我喜欢做以下事情：

{% for product in products %}
      <div class="row">
          <a class="itemId" data-item-id="{{product.id}}">Click here to get the id</a>
      </div>
{% endfor %}

然后您可以使用 jQuery 并执行此操作：

$(".itemId").click(function(){
    var itemId = $(this).data("item-id");
    alert(itemId);
});

Answer 2

 <p><a href="/output2?{{product.ASIN}}" class="btn btn-primary" role="button">Choose Set</a></p>

这成功了，它获取了与当前帧关联的 product.ASIN 并将其传递到下一页！！

使用 flask jinja2 和 bootstrap 模板来回传递 url 和 ID

Passing urls and IDs back and forth using flask jinja2 and bootstrap templates

html

python

jinja2

flask