将数据传递给引导模式 Django 模板答案

【问题标题】：Passing data to bootstrap modal Django template将数据传递给引导模式 Django 模板
【发布时间】：2017-12-31 14:19:15
【问题描述】：

视图将元素列表传递给模板，例如电影列表，然后将它们呈现在表格中。每个元素都有它的细节，一个特定的元素有一个列表。这个列表的内容我想把它们放在一个模态里。我正在使用两个 for 循环来执行此操作，如下所示：

<table>
  <thead>
    <tr>
       <td>title</td>
       <td>description</td>
       <td>hours</td>
    </tr>
  </thead>
  <tbody>
    {% for key in movies %}
     <tr>
       <td>{{ key.title }}</td>
       <td>{{ key.description }}</td>
       <td>
          <!--This button calls my modal-->
          {% for hour in key.hours %}
             <li>{{ hour }}</li>
          {% endfor %}
          <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal"></button>
       </td>
     </tr>
    {% endfor %}
  </tbody>
</table>

我的模态框位于包裹我的桌子的 div 之外的桌子下方。我想将第二个 for 循环的值传递给我的模态。当用户单击按钮时，值会出现在模式中。

我该怎么做？

【问题讨论】：

标签： jquery django twitter-bootstrap bootstrap-modal

【解决方案1】：

你有两个选择

您可以使用 Javascript 在单击按钮时更改模态框的内容。
您可以为每部电影及其小时创建一个模态，而不是一个模态。根据您单击的按钮，会打开不同的模式。

【讨论】：

【解决方案2】：

正如@jastr 所说，有两种解决方案。其中一个正在做这样的事情：

用<ul> 包裹你的<li> 元素
为您的按钮添加一个类，例如open-modal
为您的按钮添加一个点击监听器，当用户点击按钮，您将列表添加到您的模式中

首先，对您的 html 进行一些更改：

<table>
  <thead>
    <tr>
       <td>title</td>
       <td>description</td>
       <td>hours</td>
    </tr>
  </thead>
  <tbody>
    {% for key in movies %}
     <tr>
       <td>{{ key.title }}</td>
       <td>{{ key.description }}</td>
       <td>
          <!-- You may want to put this whole list into your modal body -->
          <ul>
          {% for hour in key.hours %}
             <li>{{ hour }}</li>
          {% endfor %}
          </ul>
          <button type="button" class="btn btn-default open-modal" data-toggle="modal" data-target="#myModal"></button>
       </td>
     </tr>
    {% endfor %}
  </tbody>
</table>

然后，您可以像这样添加一个点击侦听器以将列表插入到您的模式中：

<script type="text/javascript">
    $('.open-modal').click(function (e) {
        $('#myModal .modal-body').html($(this).prev().clone());
    });
</script>

【讨论】：