Proje: Temizle Düğmesi

Coddy'nin Django Journey'sinin JSON API'leri bölümünün bir parçası. Ders 17 / 19.

Uç nokta çalışıyor; şimdi ana sayfaya bunun için bir düğme ekleniyor. Yeni app.js hazır ve son satırı bunu bağlar:

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

addEventListener("click", clearDone), bu öğeye her tıklandığında clearDone işlevini çalıştırır. clearDone, uç noktanıza POST isteği gönderir, "Done tasks cleared: " + result.deleted ifadesini message kimliğine sahip öğeye yazar ve sayfanın yeni durumu göstermesi için showSummary() ile showTasks() işlevlerini yeniden çağırır. Kimlikleri betik belirler; sayfanız bunlarla eşleşmelidir.

Görev

Orta

Yeni app.js dosyasını oku, ardından tasks/templates/tasks/home.html dosyasına, betiğin dinlediği Clear done tasks yazılı düğmeyi ve mesajın görüntüleneceği öğeyi ekle.

Çalıştır'a basıp Clear done tasks düğmesine tıkla: mesaj Done tasks cleared: 1 yazar ve Call the bank listede kalır.

Kendin dene

{% 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>