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 %}正在遍历一个字典列表，每个字典都包含一些键/值对，例如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参数都会从videoID收到dict["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 %}之间，我会想到每次迭代，{{1} } dict["description"]具有不同的值会有不同的值。

Answer 1

问题是您使用HTML id作为模式的data-target属性（data-target="#myModal"）。 ID属性必须在整个文档中是唯一的 - 正常（但未指定）浏览器行为是在被要求时返回带有ID的第一个 DOM节点。< / p>

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

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

1 个答案: