プロジェクト：クリアボタン

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

エンドポイントは動作しています。次はホームページにそのためのボタンを追加します。新しいapp.jsの準備ができており、最後の行でイベントを設定します。

document.getElementById("clear-done").addEventListener("click", clearDone);

addEventListener("click", clearDone)は、その要素がクリックされるたびにclearDoneを実行します。clearDoneはエンドポイントにPOSTリクエストを送り、"Done tasks cleared: " + result.deletedをidがmessageの要素に書き込み、ページに新しい状態が表示されるように、もう一度showSummary()とshowTasks()を呼び出します。スクリプトでidを決めているため、ページ側もそれに合わせる必要があります。

チャレンジ

中級

新しい app.js を読み、次に tasks/templates/tasks/home.html に、スクリプトがリッスンするボタン「Clear done tasks」と、そのメッセージが表示される要素を追加します。

「実行」を押して「Clear done tasks」をクリックします。メッセージには Done tasks cleared: 1 と表示され、Call the bank はリストに残ります。

自分で試してみよう

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Task tracker</title>
</head>
<body>
    <h1>Task tracker</h1>
    <p id="summary"></p>
    <ul id="task-list"></ul>
    <script src="{% static 'tasks/app.js' %}"></script>
</body>
</html>