Menu
CoddyTech

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

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

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

Django 6.0ではテンプレートパーシャルが追加されました。これは単独でもレンダリングできる、名前付きのテンプレートの一部分です。{% partialdef name %}と{% endpartialdef %}で囲みます。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つだけ表示します。

  1. tasks/list.htmlで、ループ内の<li>をinlineのtask-rowという名前の部分テンプレートにし、/tasks/ですべての行が引き続き表示されるようにします。
  2. tasks/views.pyにtask_row(request, pk)を追加します。taskを渡してその部分テンプレートだけをレンダリングするか、Djangoの404ページを表示します。
  3. tasks/urls.pyに"tasks/<int:pk>/row/"を追加し、名前をtask_rowにします。

/tasks/3/row/を開くと、Call the bank (done)だけが表示され、見出しはありません。

自分で試してみよう

<!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プレイグラウンド