Dự án: Nút xóa

Thuộc phần API JSON trong hành trình Django của Coddy. Bài học 17 trên 19.

Endpoint đã hoạt động, giờ trang chủ có thêm một nút để gọi endpoint đó. Tệp app.js mới đã sẵn sàng, và dòng cuối cùng kết nối nút với hàm xử lý:

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

addEventListener("click", clearDone) chạy clearDone mỗi khi bạn nhấp vào phần tử đó. clearDone gửi yêu cầu POST đến endpoint, ghi "Done tasks cleared: " + result.deleted vào phần tử có id message, rồi gọi lại showSummary() và showTasks() để trang hiển thị trạng thái mới. Tập lệnh quyết định các id, trang của bạn phải khớp với chúng.

Thử thách

Trung bình

Đọc app.js mới, rồi trong tasks/templates/tasks/home.html thêm nút mà tập lệnh lắng nghe, với nội dung Clear done tasks, và phần tử chứa thông báo của nút.

Nhấn Chạy rồi nhấp vào Clear done tasks: thông báo hiển thị Done tasks cleared: 1, còn Call the bank sẽ biến mất khỏi danh sách.

Tự làm thử

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