top of page
  • Julia Sememova

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

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

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

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

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




Пример кода

to-do

data.jsw

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

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

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

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


менеджер контента на викс

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

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

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

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

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

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

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

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

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


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

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

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

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

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


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



366 views

Recent Posts

See All

Yorumlar


bottom of page