使用烧瓶 jinja2 和引导模板来回传递 url 和 ID答案

【问题标题】：Passing urls and IDs back and forth using flask jinja2 and bootstrap templates使用烧瓶 jinja2 和引导模板来回传递 url 和 ID
【发布时间】：2015-09-20 13:16:14
【问题描述】：

Flask/jinja2/bootstrap noob 在这里。我正在使用烧瓶、jinja2 和引导模板来制作基本网页。使用下面的 {% for product in products %}，我正在尝试显示多个产品面板（在本例中来自亚马逊），并且我正在尝试使用 {{product['imgurl']}} 来分配每个面板中的图片网址。除此之外，由于使用 {% 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 框架内完成。如果可以的话，任何对此的帮助/解决方案将不胜感激，到目前为止，我已经花了很多时间来寻找这个，但我一直无法找到明确的答案或方法。谢谢..

【问题讨论】：

标签： python html flask jinja2

【解决方案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);
});

【讨论】：

感谢第一个建议，这真的很有帮助，我认为我没有正确解释第二个，我希望用户为每个图像都有一个按钮，以便在显示的图像之间进行选择。我真正想做的是从显示的多个按钮中捕获单击了哪个按钮并将其传递给生成的 href="" 调用，因此单击调用的下一页
@bnnrs 正如我在您的代码中看到的那样，您每个产品只有一张图片，因此您可以按照我的方法跟踪图片点击，然后相应地做一些事情，让我知道它是否/为什么不起作用给你...

【解决方案2】：

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

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

【讨论】：