了解意外的 Jinja2 控制结构迭代

Question

Jinja2 的新手并试图理解为什么以下块按预期工作：

{% extends "base.html" %}

{% import "bootstrap/wtf.html" as wtf %}
<!-- http://codepen.io/ncerminara/pen/zbKAD/ --!>
{% block title %}Video Feed{% endblock %}

{% block page_content %}
    <h1>Video Feed</h1>
    <p>This page can only be viewed by logged in users.</p>
    <p>You are logged in as <b>{{ current_user.username }}</b>.</p>

    <!--here we will loop through video feed returned after user-submitted tag interpolation with OVP API feed has been processed by video feed processing logic elsewhere in app --!>

{% for dict in video_package %}

<div class="embed-responsive embed-responsive-16by9">

 <!-- Start of Brightcove Player -->
<div style="display:none">

</div>

<!--
 By use of this code snippet, I agree to the Brightcove Publisher T and C
 found at https://accounts.brightcove.com/en/terms-and-conditions/.
 -->

<script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>

<object id="myExperience" class="BrightcoveExperience">
    <param name="bgcolor" value="#FFFFFF" />
    <param name="width" value="480" />
    <param name="height" value="270" />
    <param name="playerID" value="42392001" />
    <param name="playerKey" value="AQ~~,AAAABvaL8JE~,ufBHq_IZRv9kTOlTe" />
    <param name="isVid" value="true" />
    <param name="isUI" value="true" />
    <param name="dynamicStreaming" value="true" />
    <param name="@videoPlayer" value="{{ dict["videoID"] }}" />

</object>

<!--
 This script tag will cause the Brightcove Players defined above it to be created as soon
 as the line is read by the browser. If you wish to have the player instantiated only after
 the rest of the HTML is processed and the page load is complete, remove the line.
 -->
<script type="text/javascript">brightcove.createExperiences();</script>

<!-- End of Brightcove Player -->

</div>

     <!-- Button trigger modal -->
     <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
       Get Asset Data
     </button>

       <!-- Modal -->
     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
       <div class="modal-dialog" role="document">
         <div class="modal-content">
           <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel">Modal title</h4>
           </div>
           <div class="modal-body">
               Description: {{ dict["description"] }}
           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
             <button type="button" class="btn btn-primary">Save changes</button>
          </div>
         </div>
        </div>
       </div>

     <p>
     </p>

{% endfor %}

{% endblock %}

for 循环 {% for dict in video_package %} 遍历字典列表，每个字典包含一些 key/value 对，例如 videoID、description 等。

下面是 video_package 的示例：

[{'description': u"King Lawal believes with Davis", 'name': u"Muhammed fights smart", 'videoID': u'48257001'}, {'description': u'Kyra twister event', 'name': u'wins by a ground', 'videoID': u'4870086579001'}, {'description': u'The Comeback', 'name': u'April 29', 'videoID': u'4869818001'}]

对于每个指令，视频播放器嵌入代码中的 @videoPlayer 参数从 dict["videoID"]:

接收 videoID

<param name="@videoPlayer" value="{{ dict["videoID"] }}" />

因此该模板呈现多个视频播放器嵌入（与列表中的字典一样多的播放器嵌入 video_package），每个都有单独的视频 ID 并按预期工作。

但我还尝试通过以下方式将 dict["description"] 中包含的文本发送到按钮的每个实例：

<div class="modal-body">
Description: {{ dict["description"] }}
</div>

但是，在模板中为每个按钮呈现的只是 video_package 列表中第一个字典中的 dict["description"] 字符串。换句话说，每个按钮都包含相同的文本，即使每个玩家都从每个词典中获取视频 ID，该文本始终属于第一个词典。

我确定我在这里遗漏了一些明显的东西，但是鉴于一切都在 {% for dict in video_package %} 和 {% endfor %} 之间，我会认为每次迭代，dict["description"] 都会具有不同的值，就像 dict["videoID"] 具有不同的值一样。

Answer 1

问题是您使用 HTML id 作为模态框的 data-target 属性 (data-target="#myModal")。 ID 属性必须在整个文档中是唯一的 - 正常（但未指定）浏览器行为是 return 首先 DOM 节点在被要求时有一个 ID。

解决方法是用 current loop index - e 更新您的 data-target 和 modal 的 ID。 G。 data-target="#myModal-{{loop.index}}" 和 div class="modal fade" id="myModal-{{loop.index}}"（您也应该对 aria-labelledby 属性和 .modal-title ID 执行相同的操作）。

了解意外的 Jinja2 控制结构迭代

Understanding unexpected Jinja2 control structure iteration

python

jinja2

flask