現在我們已經在第 3 部分新增了開啟和關閉待辦事項項目的功能，讓我們新增一個表單來建立新的待辦事項項目，使用 HTMX 和接受 POST 請求的路由。
它看起來像這樣：
要建立新帖子，我們有兩種常見的 POST 路由選項：一種是使用單獨的路由，例如 /tasks/create，另一種是使用我們已經列出任務的相同路由， /任務。我們會選擇後者，因為它最符合 REST 和超媒體實踐，但兩者都很好。
由於 URL 已經定義，我們只需要更改 core/views.py 中的任務視圖。為了保持程式碼簡潔，我們將在單獨的函數上保留處理 POST 請求的程式碼。
def _create_todo(request): # <-- NEW
title = request.POST.get("title")
if not title:
raise ValueError("Title is required")
todo = Todo.objects.create(title=title, user=request.user)
return render(request, "tasks.html#todo-item-partial", {"todo": todo})
@require_http_methods(["GET", "POST"]) # <-- NEW
@login_required
def tasks(request):
if request.method == "POST": # <-- NEW
return _create_todo(request)
context = {
"todos": get_user_todos(request.user),
"fullname": request.user.get_full_name() or request.user.username,
}
return render(request, "tasks.html", context)
在 templates/tasks.html 上我們將新增一個表單
<!-- core/templates/tasks.html -->
{% 擴充“_base.html” %}
{% 載入部分 %}
{% 區塊內容 %}
<div>
<p>所有有趣的程式碼都在表單標籤：</p>
<ul>
<li>
hx-post="{% url 'tasks' %}" 表示表單將向任務 url 發出 POST 請求；</li>
<li>
hx-swap="beforeend" 和 hx-target="#todo-items" 一起工作；它將回應的目標設定為 #todo-items 標記（ul），並且應該在清單末尾之前新增片段。如果我們想在頂部新增項目，我們可以使用 afterbegin 來代替。 </li>
<li>
hx-on::after-request="this.reset()" 將在請求發送後重置表單（清理輸入文字）；這將允許我們透過鍵入並按「Enter」鍵提交表單來一次新增多個任務。 </li>
</ul>
<p>讓我們來看看它的實際效果吧！ </p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173595748091013.jpg" alt="Creating a To-Do app with Django and HTMX - Part adding new Todos"></p>
<h2>
處理緩慢的請求
</h2>
<p>現在我們可以新增項目了，讓我們處理一個常見的使用者體驗問題：延遲。雖然我們在本地主機上的測試非常快，但在現實世界中，創建和切換待辦事項的請求可能需要一兩秒，並且用戶可能不確定發生了什麼。 </p>
<p>對於提交按鈕，我們將使用 hx-disable-elt 屬性，並將其設定為tasks.html`</p>中的提交按鈕
<p>金賈<br>
</p>
<form hx-post="{% url 'tasks' %}">
hx-swap="beforeend" <br>
hx-target="#todo-items" <br>
hx-on::after-request="this.reset();"<br>
hx-disabled-elt="#submit" <!-- 新 --><br>
>
<input type="text" required name="title" placeholder="新增待辦事項" class="input input-bordered flex-1 text-lg"><br>
表格><br>
<p>對於切換功能，我們可以在請求期間使用 hx-on:click 停用複選框</p>
<p>`金賈</p>
<pre class="brush:php;toolbar:false"> `
我們可以透過開啟開發者工具/網路並將 Throttling 選項設為 3G 來強制請求變慢（在 Firefox 中您可以選擇更慢的選項）
讓我們看看進展如何：
我們現在已經完成了！在第 5 部分中，我們將在視圖中添加一些測試，這可能是比測試客戶端程式碼更好的體驗:)
以上是使用 Django 和 HTMX 建立待辦事項應用程式 - 新增待辦事項的部分的詳細內容。更多資訊請關注PHP中文網其他相關文章！
