一、表单设计

首先，在templates/tasks.html文件中，我们将引入一个新的表单元素，用于提交新的待办事项。这个表单将利用HTMX的hx-post属性将数据发送到后端的/tasks接口。

<form hx-post="{% url 'tasks' %}" hx-swap="beforeend" hx-target="#todo-items" hx-on:after-request="this.reset()">
    <div class="mb-4">
        <input type="text" name="title" placeholder="Add a new task..." required>
        <button type="submit">Add</button>
    </div>
</form>

<ul class="list bg-base-100 rounded-box shadow-md" id="todo-items">
    {% for todo in todos %}
    {% partialdef todo-item-partial inline %}
    <li class="list-row">
        <input type="checkbox" {% if todo.is_completed %}checked{% endif %} class="checkbox checkbox-lg checkbox-info mr-4">
        {{ todo.title }}
    </li>
    {% endpartialdef %}
    {% endfor %}
</ul>

二、后端处理

在core/views.py文件中，我们将处理POST请求，并创建新的待办事项。为了保持代码的整洁和可维护性，我们将POST请求的处理逻辑封装在一个单独的函数中。

from django.shortcuts import render, redirect
from django.http import JsonResponse
from .models import Todo

def _create_todo(request):
    if request.method == 'POST':
        title = request.POST.get('title')
        if title:
            Todo.objects.create(title=title)
            return JsonResponse({'status': 'success', 'message': 'Task created successfully'})
        else:
            return JsonResponse({'status': 'error', 'message': 'Title is required'})
    return render(request, 'tasks.html')

三、优化用户体验

为了提升用户体验，我们还需要考虑网络延迟的问题。在tasks.html中，我们可以为提交按钮添加hx-disable-elt属性，以防止用户在等待响应时多次点击。此外，对于切换待办事项完成状态的复选框，我们可以在请求期间禁用它，以避免用户在等待响应时进行不必要的操作。

四、总结与展望

至此，我们已经成功实现了使用Django和HTMX创建待办事项应用程序中的添加新待办事项功能。在未来的文章中，我们将继续探索更多高级功能，如任务的编辑、删除以及用户权限管理等。敬请关注php中文网的其他相关文章，以获取更多精彩内容！

通过本文的学习，相信您已经掌握了使用Django和HTMX创建待办事项应用程序的基本技能。现在，您可以尝试自己动手实现这个功能，并在实际项目中加以应用。祝您编程愉快！