在本教程的第三部分，我们实现了待办事项的添加和删除功能。接下来，我们将添加一个表单，用于创建新的待办事项，并利用 htmx 和后端路由处理 post 请求。
表单效果如下：
处理 POST 请求
创建新待办事项，通常有两种 POST 路由方法：使用单独的路由（例如 /tasks/create）或复用已有的任务列表路由 /tasks。我们选择后者，因为它更符合 RESTful 和超媒体原则，但两种方法都可行。
由于 URL 已定义，我们只需修改 core/views.py 中的任务视图。为了代码简洁，我们将 POST 请求处理代码放在单独的函数中。
def _create_todo(request): # ...
在 templates/tasks.html 中，我们添加一个新的表单：
{% extends "_base.html" %}{% load partials %}{% block content %} {{ fullname }}'s tasks
{% for todo in todos %} {% partialdef todo-item-partial inline %} - {{ todo.title }}
{% endpartialdef %} {% endfor %}
{% endblock %}
表单的关键代码在于：
hx-post="{% url 'tasks' %}"：表单将发送 POST 请求到 /tasks URL。hx-swap="beforeend" 和 hx-target="#todo-items"：将响应插入到 #todo-items 元素（ul 列表）的末尾。如果要添加到顶部，可以使用 afterbegin。hx-on:after-request="this.reset()"：请求完成后重置表单，方便连续添加任务。
效果演示：
处理缓慢的请求
为了提升用户体验，我们需要处理网络延迟问题。 在 tasks.html 中，我们为提交按钮添加 hx-disable-elt 属性：
对于切换待办事项完成状态的复选框，我们在请求期间使用 hx-on:click 禁用它：
模拟缓慢网络请求后效果：
模拟缓慢网络请求后的动画演示：
至此，我们完成了待办事项创建功能的开发。在第五部分，我们将添加视图层测试。 代码已提交到 GitHub 分支。
以上就是使用 Django 和 HTMX 创建待办事项应用程序 – 添加新待办事项的部分的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1355268.html
微信扫一扫 
支付宝扫一扫 
