django 每次都会使用相同的上下文渲染多个模板

Question

我正在努力使用

htmx

进行延迟加载，在多个选项卡中显示多个表。代码工作正常，但我无法解决两件事。

1. 查询集命中数据库 4 次。
2. 我尝试使用

   hx-sync

   queue

   按表一、二、三、四的顺序加载，但失败了。因此，我使用

   delay

   来加载选项卡，而不是使用

   queue

   。这样，我就可以一直先加载表一个，但其余的会随机加载。

这是我的视图文件。

def test_view(request, id: int, table: str):
    data = Model.objects.filter(id=id).values()
    if table == "table_one":
        return render(request, "path/to/table-one.html", {"data": data})
    elif table == "table_two":
        return render(request, "path/to/table-two.html", {"data": data})
    elif table == "table_three":
        return render(request, "path/to/table-three.html", {"data": data})
    elif table == "table_four":
        return render(request, "path/to/table-four.html", {"data": data})
    else:
        raise Http404

如果我打印数据进行检查，它会打印四次包含所有数据的查询集，因为它正在渲染所有四个表。

这是模板。

<div class="mb-4 border-b border-gray-200 dark:border-gray-700">
  <ul class="flex flex-wrap -mb-px text-sm font-medium text-center"
      id="myTab"
      data-tabs-toggle="#tabs"
      role="tablist">
    <li class="mr-2" role="presentation">
      <button class="inline-block p-4 border-b-2 rounded-t-lg"
              id="tab-one"
              data-tabs-target="#table-one"
              type="button"
              role="tab"
              aria-controls="table-one"
              aria-selected="false">Table One</button>
    </li>
    <li class="mr-2" role="presentation">
      <button class="inline-block p-4 border-b-2 rounded-t-lg"
              id="tab-two"
              data-tabs-target="#table-two"
              type="button"
              role="tab"
              aria-controls="table-two"
              aria-selected="false">Table Two</button>
    </li>
    <li class="mr-2" role="presentation">
      <button class="inline-block p-4 border-b-2 rounded-t-lg"
              id="tab-three"
              data-tabs-target="#table-three"
              type="button"
              role="tab"
              aria-controls="table-three"
              aria-selected="false">Table Three</button>
    </li>
    <li role="presentation">
      <button class="inline-block p-4 border-b-2 rounded-t-lg"
              id="tab-four"
              data-tabs-target="#table-four"
              type="button"
              role="tab"
              aria-controls="table-four"
              aria-selected="false">Table Four</button>
    </li>
  </ul>
</div>
<div id="tabs">
  <div class="hidden rounded-lg"
        id="table-one"
        role="tabpanel"
        aria-labelledby="tab-one">
    <div hx-get="{% url 'test:table' id 'table_one' %}"
          hx-trigger="load">Loading...</div>
  </div>
  <div class="hidden rounded-lg"
        id="table-two"
        role="tabpanel"
        aria-labelledby="tab-two">
    <div hx-get="{% url 'test:table' id 'table_two' %}"
          hx-trigger="load delay:0.5s">Loading...</div>
  </div>
  <div class="hidden rounded-lg"
        id="table-three"
        role="tabpanel"
        aria-labelledby="tab-three">
    <div hx-get="{% url 'test:table' id 'table_three' %}"
          hx-trigger="load delay:0.5s">Loading...</div>
  </div>
  <div class="hidden rounded-lg"
        id="table-four"
        role="tabpanel"
        aria-labelledby="tab-four">
    <div hx-get="{% url 'test:table' id 'table_four' %}"
          hx-trigger="load delay:0.5s">Loading...</div>
  </div>
</div>

如上所述，我认为使用

hx-sync

queue

比

load delay

更好。

请帮助我解决这两个问题。 顺便说一句，查询集问题比

hx-sync

更重要。

Answer 1

据我了解，

延迟加载意味着ajax。

四个不同的请求。

这意味着 4 个查询。

如果您只想使用一个查询， 不要使用延迟加载。只需运行数据即可。

认为这有帮助。 如果更多人需要更多帮助，请回复。 我会尽力帮助你。