Для своего Javascript-приложения с Rails API я создал ProjectLife, список задач, основанный на формате, который я долгое время использовал на бумаге. Видео-прохождение доступно здесь. По своей сути это карточки проектов с заданиями на них. Вы можете создавать новые проекты и новые задачи в этих проектах, обновлять названия проектов или задач, изменять статус задачи с активно на выполнить сейчас, ожидание или выполнено, а также присваивать задачам размер/число сложности. Я обнаружил, что эти элементы помогают мне определить, как расставить приоритеты в моем времени, и помогают определить наилучшие действия, которые следует предпринять в любой момент времени.

Несколько вещей были довольно сложными, но важными для работы этого приложения:

  1. Делегирование события: я хотел, чтобы каждая задача отображала свои элементы управления (значки, которые изменяют статус, откладывают или удаляют задачу) при наведении на нее курсора мыши. Но так как я также позволяю пользователям создавать новые задачи, прослушиватель событий для наведения мыши должен был идти на самой карточке проекта и ссылаться на элементы разных классов, чтобы новые задачи, которые были динамически созданы с использованием Javascript, также имели требуемый прослушиватель событий. . Аналогичная стратегия использовалась для заголовков проектов, которые можно редактировать: поскольку пользователь может создавать новые проекты, необходимо было поместить прослушиватель событий на весь контейнер, содержащий карточки проектов, и чтобы он прослушивал наведение курсора или щелчок. на элементе с классом «название проекта».
  2. Изменение статуса задач при нажатии на значки управления требовало очень хорошо продуманной логики. Задача может переключаться между статусами «Активно» и «Готово/Ожидает/Выполнить сейчас» или между различными статусами, и отображение задачи должно правильно отображать статус не только при первой загрузке страницы, но и при изменении вещей.
  3. Наведение мыши на строки задач в контексте значков состояния также требует некоторого размышления: да, все элементы управления должны быть видны, когда вы наводите курсор на задачу, но когда мышь покидает задачу, задача должна вернуться к отражению своего статуса, поэтому не все элементы управления возвращаются в скрытые. Я решил эту проблему, изменив скрытые значки на класс «видимый при наведении мыши» при наведении курсора на задачу, чтобы приложение могло изменить эти задачи обратно на скрытые, а также оставить видимые элементы с видимым классом независимо от того, наведена ли задача или нет. .

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