Пример проекта на реактивном (интерфейс страницы автоматически и постоянно реагирует на изменение данных на нем) фреймворке Svelte. Свелт легко интегрируется в любой язык веб-программирования где работает JavaScript.
Как изменить свойство в массиве вложенного в другой массив данных.
При изменении даты в реактивном режиме она не меняется. Может это баг, может фича. Но нам нужно, чтобы все изменилось. Как это сделать.
Как передать пустое значение с фронта, чтобы на бэкенде оно приходило пустым. Для чего это нужно? Например, для удаление из поля данных.
Используем фреймворк стилей tailwind совместно со svelte.
Примеры выпадающего списка есть на официальном сайте, но если попробовать повторить то же самое для each-блока, то выбирая пункт меню из выпадающего списка для одного элемента, во всех остальных действие будет повторяться. Расскажу, как это избежать и сделать правильно.
Пример как отправлять данные в формах input через кнопку Готово или через Enter на iOS устройствах.
Делаем календарь на Svelte.
Будем связывать компоненты переменными, которые передаются из дочерних страниц в родительские и наоборот.
Запуск функции при изменении переменной на svelte. Также, что означает в svelte выражение начинающиеся с $:.
Настраиваем меню в Svelte, подсвечиваем текущую страницу и создаем в адресной строке url к ссылкам.
Настраиваем копирование изображений в RollupJS для Svelte. Полное руководство можно узнать на официальном сайте. Здесь короткая выдержка по существу.
Реализация интерактивных графиков (charts) на svelte.
Как можно сделать фильтрацию таблицы на JavaScript и Svelte быстро и легко.
Пример кнопки с отчетом таймера на Svelte, после или в течении которого происходит какое-нибудь событие. Это событие обновляет страницу или подтягивает данные аяксом без обновления.
Делаем меню в svelte на модуле svelte-tabs.
Настраиваем пагинацию в svelte.
Описание взаимодействия передачи информации от фронта к бэку через GET и POST на Svelte и Python.
В реактивном фреймворке Svelte не придется использовать addEventListener. Во-первых он не будет срабатывать, потому что многие элементы на странице создаются после её загрузки, а затем еще и меняются в процессе. А во-вторых в этом нет необходимости.
У нас есть некая таблица с данными. В ней одна из колонок состоит из цифр. Мы хотим чтобы цвет следующего значения подкрашивался зеленым цветом, если оно больше предыдущего. И наоборот — красным, если меньше. Как это сделать ниже.
Пример работы bind:value на основе each блока. Код ниже: — формирует таблицу через each из данных, которые приходят с бэкенда; — сохраняет введенные данные из input и отправляет их на бэк. В данном коде реализация только фронта, демонстрирует работу svelte….
Реактивный фреймворк Svelte легко интегрируется в Python. В данном случае пример интеграции svelte с Flask.
Пример двух способов асинхронной загрузки на странице с реактивным фреймворком Svelte.
В документация svelte не нашел подходящих примеров работы с checkbox в each block, которые помогли бы моим задачам. Пришлось придумать несколько своих вариантов.
Сопоставление данных делать на бэкенде удобнее — не будет засорение кода на фронте. Также и для пользователя преимущества — результат появится на странице быстрее. Однако на фронте тоже можно сопоставлять данные двух многомерных массивов. Пример, как сопоставить два массива данных…
Массивы в Svelte можно разобрать минимум двумя способами.
