Menu
CoddyTech

テンプレートのパーシャル

CoddyのDjangoジャーニー「JSON API」セクションの一部。レッスン 14/19。

スクリプトが常にJSONを必要とするとは限りません。タスクを追加した後、そのタスク用に用意された <li> をサーバーに要求し、リストに挿入することがあります。その行はすでにテンプレートで描画されているため、サーバーはそれを再利用するべきです。

Django 6.0ではテンプレートパーシャルが追加されました。テンプレートの一部に名前を付けて、単独でも描画できる機能です。{% partialdef %}で囲みます。inlineを指定すると、ループの各反復で、その場所にも描画されます。ビューでは、テンプレート名、#、パーシャル名を指定して、その部分だけを描画します。

{% partialdef cart-total inline %}
    <strong>{{ cart.total }}</strong>
{% endpartialdef %}
return render(request, "shop/cart.html#cart-total", {"cart": cart})

コンテキストには、この例では cart のように、その部分で読み取る値が含まれていなければなりません。ページとパーシャルは同じマークアップを共有するため、互いに食い違うことはありません。

challenge icon

チャレンジ

中級

/tasks/ の1行を単独で提供します。

  • list.html で、<li> を task-row という名前のパーシャルにし、引き続きすべてのタスクについて描画します。
  • task_row(request, pk) ビューを作成し、そのパーシャルのみを描画します。タスクが見つからない場合は404を返します。
  • "tasks/<int:pk>/row/" という名前が task_row のルートを追加します。

Runを押してから、/tasks/1/row/ を開きます。1行が表示されます。

自分で試してみよう

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>All tasks</title>
</head>
<body>
    <h1>All tasks</h1>
    <ul id="tasks">
        {% for task in tasks %}
            <li id="task-{{ task.id }}">{{ task.title }}{% if task.done %} (done){% endif %}</li>
        {% endfor %}
    </ul>
</body>
</html>
quiz icon腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

JSON APIのすべてのレッスン

自分で練習してみよう: Djangoプレイグラウンド