Django & HTMX -获取后仅显示html模板的部分
我想要创建一个instagram克隆人。我创建了一个post.html，其中包括一个针对所有帖子的post-char.html文件和一个用于过滤这些帖子的postfilter.html。
<!-- simple post.html view -->
<div>
<div>
{% include '_includes/bars/post-filter.html' %}
</div>
<div id="more-posts-wrapper">
{% for post in posts %}
{% include '_includes/cards/post-card.html' %}
{% endfor %}
</div>
</div>现在，在单击load more button之后，我添加了htmx来加载更多帖子。我试图在div中的现有帖子之后用id=more-posts-wrapper加载新帖子。
<div>
<div>
{% include '_includes/bars/post-filter.html' %}
</div>
<div hx-get="?page={{ page_obj.next_page_number }}"
hx-trigger="click"
hx-swap="innerHTML"
hx-target="#more-posts-wrapper">
<p>LOAD MORE</p>
</div>
<div id="more-posts-wrapper">
{% for post in posts %}
{% include '_includes/cards/post-card.html' %}
{% endfor %}
</div>
</div>不幸的是，如果我按下按钮，正确的回复帖子就会被传递，但是整个post.html文档会在div之后加载id=more-posts-wrapper。我只想加载post-card.html文件，而不是重新加载post-filter.html文件。
我的views.py
class MemesView(ListView):
model = Post
template_name = 'memes.html'
context_object_name = 'posts'
paginate_by = 1有人知道我能做什么吗？
回答 1
Stack Overflow用户
发布于 2022-04-08 12:02:06
对于HTMX，我们有两种类型的请求：
- 全文页:当用户加载页面时，我们希望显示包含过滤器和内容的完整模板。
- 分部页面:在第一次加载之后，我们只希望通过HTMX加载内容部分，并更新页面的相应部分。
。
我们必须相应地构造模板，以便在这两个请求中重用它们。
完整页面的模板post_page.html
<div>
<div>
{% include '_includes/bars/post-filter.html' %}
</div>
<div id="more-posts-wrapper">
{% include 'posts_partial.html' %}
</div>
</div>以及posts_partial.html部分模板，我们将想通过HTMX加载的所有内容都放在这里：
<div hx-get="?page={{ page_obj.next_page_number }}"
hx-trigger="click"
hx-swap="innerHTML"
hx-push-url="true"
hx-target="#more-posts-wrapper">
<p>LOAD MORE</p>
</div>
<div id="more-posts-wrapper">
{% for post in posts %}
{% include '_includes/cards/post-card.html' %}
{% endfor %}
</div>在这个模板中，我们有所选页面的明信片，而且我们还必须在这里放置'Load more‘按钮，因为我们必须在按钮上的每个请求之后更新page_obj.next_page_number值。
在视图函数中，我们可以检查HX-Request: true头，以检测HTMX请求。如果请求是由HTMX发出的，则在get_template_names()方法中设置部分模板，否则使用整个页面模板。
class MemesView(ListView):
model = Post
context_object_name = 'posts'
paginate_by = 1
def get_template_names(self):
is_htmx = self.request.headers.get('HX-Request') == 'true'
return 'posts_partial.html' if is_htmx else 'post_page.html'此外，我还添加了hx-push-url="true"，以便HTMX将更新URL中的页码，这样用户就可以在几次HTMX请求之后刷新和接收正确的页面。
https://stackoverflow.com/questions/71743775
复制相似问题
腾讯云开发者
