Создаём чек-лист дел на сайте wix

Отслеживайте свои задачи с помощью списка дел. Вы можете создать чек-лист для себя, своих сотрудников или клиентов.

Описание функционала

В этом примере мы позволяем посетителям сайта отслеживать свои задачи с помощью списка дел. Посетители могут добавлять задачи в список, отмечать задачи как выполненные и удалять выполненные задачи.

Смотреть Пример

Пример кода

to-do

data.jsw

Как создать аналогичный функционал

Мы создали коллекцию MyTasks со следующими полями:

Заголовок: название задачи

isComplete: указывает, завершена ли задача

Открыть в Редакторе >

Для простоты работы, на данный момент любой пользователь может изменять данные коллекции, но при использовании этого примера на вашем сайте всегда предпочтительнее предоставлять только необходимые разрешения для доступа к вашей коллекции.

Элементы страницы

На нашей главной индексной странице мы добавили следующие элементы:

• TextInput: для ввода текста для новой задачи.

• Кнопка: для добавления новой задачи в список.

• Repeater: для отображения текущих задач. Каждый элемент содержит текстовый элемент, содержащий название задачи, и кнопку для отметки задачи как выполненной.

• Кнопка: для удаления всех выполненных задач из списка.

Серверный код

Мы обрабатываем все операции, связанные с коллекцией, в веб-модуле data.jsw. Веб-модуль включает в себя функции для получения всех текущих задач, вставки новой задачи, обновления задачи и удаления задачи. Мы рекомендуем использовать внутренний код при доступе к коллекции из соображений безопасности.

Код на странице

Мы зарегистрировали следующие обработчики событий:

1. onItemReady: запускается для каждой задачи, показанной в повторителе. Для каждой задачи нам нужно показать ее как выполненную или незавершенную, в соответствии с ее статусом, и зарегистрировать соответствующий переключатель в обработчике события changeCompletedStatus.

2. createNewTask: выполняется либо при нажатии кнопки «Добавить», либо при нажатии клавиши «Ввод», когда фокус находится на элементе TextInput.

3. clearCompletedTasks: запускается при нажатии кнопки Clear Completed.

Мы вызываем fetchData(), которая заполняет повторитель задачами, хранящимися в коллекции. Во время выполнения операции отображается gif-файл загрузчика.