使用 Django 将变量传递给包含的 html 模式

Question

我想快速构建一个小型 web 应用程序，所以我决定纯粹使用 django 和 django 提供的东西 - 模板渲染，所以没有 React/Vue 之类的。 我遇到的问题是，我有一些卡片，一旦用户单击卡片，它们就会显示在 for 循环（jinja）中，出现一个模态，这就是它变得混乱的地方。

我想传递卡片的 id，以便我可以发出 get 请求并在模态中呈现数据。 我拥有的代码是：

// index.html

  <div id="machine-cards" class="grid grid-cols-3 gap-4 m-20">
    {% for machine in machines %}
      <div id="card-{{ machine.id }}" onclick="setModalData({{ machine.id }})" class="bg-white shadow-md rounded px-4 pt-4 pb-2 mb-4 transform hover:scale-105 cursor-pointer">
        <div id="card-header" class="flex justify-between">
          <p>Machine number: {{ machine.number }}</p>
          <div id="state"
               class="rounded-full h-4 w-4 {% if machine.status == 1 %} bg-green-500 {% elif machine.status == 2 %} bg-red-500 {% elif machine.status == 3 %} bg-yellow-500 {% else %} bg-gray-500 {% endif %}">
          </div>
        </div>
        <div id="card-body" class="flex justify-center align-center mt-5 mb-5">
          <p>{{ machine.manufacturer }}</p>
        </div>
        <div id="card-footer" class="flex justify-end">
          <p class="text-gray-300 text-sm">Last updated: 28.06.2021</p>
        </div>
      </div>
    {% endfor %}
  </div>
{% include "general/modal.html" %}

<script>
  function setModalData(cardId) {
    // not sure what to do with the cardId :(
    modal.style.display = 'flex';
  }
</script>



// general/modal.html

<body>
<!-- The Modal -->
  <div id="modal" class="hidden justify-center items-center h-full w-full absolute bg-black bg-opacity-50 top-0">
    <!-- Modal content -->
    <div class="bg-white shadow-md rounded px-6 pt-4 pb-8 w-1/2 h-1/2">
      <div class="modal-header flex justify-end">
        <span class="cursor-pointer text-3xl" onclick="modal.style.display = 'none'">&times;</span>
      </div>
      <div class="modal-content flex justify-center items-center ">
        <div class="loader ease-linear rounded-full border-4 border-t-4 border-gray-200 h-12 w-12 mb-4"></div>
      </div>
    </div>

  </div>
</body>
</html>
<script>
  // Get the modal
let modal = document.getElementById("modal");

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
// somehow get the ID, fetch the data and hide the loader
</script>

我知道如何使用 React 或 Vue.js，但是，应用程序非常小，我想快速对其进行原型设计，所以我决定暂时避免使用 react/vue 等。 我正在考虑试用 alpine.js，因为它比其他的要小。

我也尝试过，我希望这不是我最好的解决方案，就是在 for 循环中移动包含块并为每张卡设置一个隐藏的模式，这绝对不是最佳解决方案。

Answer 1

我在@Swati 的评论中提出了建议，这需要 jquery（也可以不这样做，但在我看来这是不值得的）。 更改的代码部分是

// index.html

  // some unchanged html code

  <div class="machine-modal">
    {% include "general/modal.html" %}
  </div>

<script>
  function setModalData(cardId) {
    $(".machine-modal").html('').load(`{% url 'machine_details' %}?id=${cardId}`);
  }
</script>

machine_details url 下的视图将使用所需的上下文呈现modal.html

def machine_details(request):
    machine_id = request.GET.get('id', None)

    if machine_id is not None:
        machine_data = Machine.objects.get(machine=machine_id)
        return render(request, 'general/modal.html', {'machineDetails': machine_data})

最后，模态隐藏在 if 块中，仅在数据存在时显示

// modal.html
{% if machineDetails %}
// html code
{% endif %}

使用 Django 将变量传递给包含的 html 模式

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-07-02 10:55:11

使用 Django 将变量传递给包含的 html 模式

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-07-02 10:55:11

解决方案1
0 已采纳 2021-07-02 10:55:11