Django と HTMX を使用した ToDo アプリの作成 - 新しい Todo の追加部分

パート 3 で Todo 項目のオンとオフを切り替える機能を追加したので、HTMX と POST リクエストを受け入れるルートを使用して、新しい Todo 項目を作成するフォームを追加しましょう。

次のようになります:

POSTリクエストを受け入れるようにビューを拡張する

新しい投稿を作成するには、POST ルートに 2 つの一般的なオプションがあります。1 つは /tasks/create などの別のルートを持つことで、もう 1 つはタスクをリストするためにすでに持っている同じルートを使用することです。 /タスク。 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>興味深いコードはすべて form タグ内にあります:</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>新しい項目を追加できるようになったので、一般的な UX の問題である遅延に対処しましょう。 localhost でのテストは非常に高速ですが、現実の世界では、ToDo 項目の作成と切り替えのリクエストに 1 ～ 2 秒かかる可能性があり、ユーザーは何が起こっているのかよくわからないかもしれません。</p>

<p>送信ボタンについては、hx-disable-elt 属性を利用し、tasks.html`</p> で送信ボタンに設定します。

<p>神社<br>
      <form hx-post="{% url 'タスク' %}" <br>
        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="新しい Todo を追加" class="input input-bordered flex-1 text-lg" /><br>
        
      </form><br>
</p>
<p>トグル機能の場合、hx-on:click を使用してリクエスト中にチェックボックスを無効にできます</p>

<p>`神社</p>

<pre class="brush:php;toolbar:false"> 

`

開発者ツール/ネットワークを開き、スロットリング オプションを 3G に設定することで、リクエストを強制的に遅くすることができます (Firefox ではさらに遅いオプションを選択できます)

どうなるかを確認してみましょう:

もう完了です!パート 5 では、ビューにいくつかのテストを追加します。おそらく、クライアント側のコードをテストするよりもはるかに優れたエクスペリエンスになるでしょう :)

以上がDjango と HTMX を使用した ToDo アプリの作成 - 新しい Todo の追加部分の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。