將數據傳遞到引導模式Django模板

Question

該視圖將元素列表（例如電影列表）傳遞到模板，並將它們呈現在表中。 每個元素都有其詳細信息，而一個特定元素則具有一個列表。 我想將這些清單的內容放入模態中。 我正在使用兩個如下的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循環的值傳遞給我的模態。 當用戶單擊按鈕時，值將出現在模態內部。

我怎樣才能做到這一點？

Answer 1

你有兩個選擇

1. 單擊按鈕時，可以使用Javascript更改模態的內容。

2. 您可以為每個電影及其小時數創建一個模態，而不是一個模態。 根據您單擊哪個按鈕，將打開另一個模態。

Answer 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>