我开始摆弄HTMX,发现了一堵我自己都无法攀登的墙:

我使用HTMX管理创建/编辑表单,并将数据发布到相应的视图并更新项目列表.它的效果非常好.但是,当表单引发验证错误时,该列表将被表单html替换.

当表单出现验证错误时,有没有办法设置不同的呈现目标?

<div class="modal-header">
    <h5 class="modal-title" id="Object_ModalLabel">{% if object %}Edit{% else %}Create{% endif %} Object</h5>
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
    <form hx-post="{{targetURL}}" hx-target="#Object_List" method="POST">
    {% csrf_token %}
        {{form.as_div}}
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Save</button>
        </div>
    </form>
</div>
from django.views.generic import TemplateView, ListView, CreateView, UpdateView, DeleteView
from django.urls import reverse_lazy
from project.mixins import HtmxRequiredMixin, ResponsePathMixin
from .models import Object_
from .forms import Object_Form
# Create your views here.

class Object_Main(TemplateView):
    template_name = 'Main.html'

class Object_List(HtmxRequiredMixin, ListView):
    model = Object_
    template_name = 'Object_List.html'
    queryset = Object_.objects.all().order_by('as_group','as_name')

class Object_Create(ResponsePathMixin, HtmxRequiredMixin, CreateView):
    template_name = 'Object_Form.html'
    model = Object_
    form_class = Object_Form
    success_url = reverse_lazy('list-object')

class Object_Update(ResponsePathMixin, HtmxRequiredMixin, UpdateView):
    template_name = 'Object_Form.html'
    model = Object_
    form_class = Object_Form
    success_url = reverse_lazy('list-object')

这些是放置表单的模板和我的视图. 如果没有办法根据react 设定不同的目标,那么我将感谢任何建议.

我查看了不同的来源,但没有一个人从相同的Angular 处理表单验证问题.我现在不需要实时验证.

我向Bing询问了一些见解,但无法找到一个令人满意的/更不用说工作的解决方案.所以我想向我的人类程序员同事寻求帮助.

推荐答案

您可以通过使用HX-Retarget修改响应头来实现这一点.在CBV的情况下,您可以覆盖form_invalid方法:

def form_invalid(self, form):
    """If the form is invalid, render the invalid form."""
    reponse = self.render_to_response(self.get_context_data(form=form))
    response['HX-Retarget'] = '#other-id"
    return response

参考文献: https://htmx.org/reference/#response_headers


如果您使用的是django-htmx,速度也会更快:

https://django-htmx.readthedocs.io/en/latest/http.html#django_htmx.http.retarget

这只是个附注.在处理htmx时,FBV方法比CBV方法要好得多,所以你可以考虑切换,以避免所有这些方法被覆盖.

Django相关问答推荐

Django Prefetch上的多重过滤

如何在Django REST框架中管理序列化程序?

如何在Django中显示多个相关对象

Django:添加第二个';详细';用于检索额外信息的视图

如何显示;Django认证系统;在模板中?

如何删除Docker上的django应用程序?

使用OuterRef过滤器获取Django记录的最大值

如何在 Django 模板中的计数器上进行 for 循环中断?

在 settings.py 中指定 Django 测试数据库名称

在 GoDaddy 上安装 django 站点

如何在 Django 中创建一个独特的 slug

在生产中使用 Django 中的 SQLite?

如何测试某个日志(log)消息是否记录在 Django 测试用例中?

Django 模板列表的第一个元素

Django -- User.DoesNotExist 不存在?

Django:访问给定字段的 Select 元组

Django 向用户推送 HTTP 响应

Django unique=True 不工作

Django Rest Framework - 缺少静态目录

Django 应用程序中的版本号