Svelte
Синтаксис шаблонов и блоки
Список задач показывает то одну строку, то десять, то спиннер загрузки. Для этого разметке нужны три вещи: условный показ блока, перебор массива и ожидание промиса. В голом HTML такого нет, поэтому Svelte добавляет блоки с фигурными скобками и решёткой: {#if} ветвит разметку, {#each} перебирает данные, {#await} ждёт промис. А чтобы кнопка реагировала на клик, в Svelte 5 событие вешается обычным атрибутом onclick, без двоеточия из старых версий.
- Любой список (товары, сообщения, комментарии) рендерится через {#each} по массиву данных
- Состояния загрузки и ошибки выражаются блоком {#await} прямо в разметке без ручных флагов
- Условный показ (авторизован или нет, пусто или есть данные) делается через {#if} и {:else}
- Динамические классы и атрибуты привязывают вид элемента к состоянию: подсветка активной вкладки
- В Svelte 5 события унифицированы как атрибуты onclick, что ближе к обычному HTML и проще для новичка
Предварительные знания
- Структура .svelte компонента: script, разметка, стили
- JavaScript: массивы, методы map и filter, промисы на уровне идеи
- Понимание вставки выражения в разметку через фигурные скобки
Выражения, атрибуты и события
Фигурные скобки работают и в тексте, и в атрибутах. Можно подставить значение в текст элемента, задать атрибут через выражение и навесить обработчик события. В Svelte 5 события - это обычные атрибуты: onclick, oninput, onsubmit. Двоеточие из Svelte 4 убрали, синтаксис стал ближе к обычному HTML.
Запись href равно url подставляет значение переменной в атрибут. Директива class:active добавляет класс active к элементу, только когда переменная active истинна - удобный способ привязать оформление к состоянию без ручной склейки строк классов. Атрибут onclick принимает функцию, которая выполнится при клике.
| Запись | Смысл |
|---|---|
| {value} | Вставить значение выражения в текст |
| src={path} | Задать атрибут значением выражения |
| class:active={cond} | Добавить класс при истинном условии |
| onclick={fn} | Навесить обработчик клика (Svelte 5) |
Переход от записи с двоеточием к атрибутам событий в Svelte 5 не косметика. Атрибуты-события подчиняются обычным правилам HTML-атрибутов: их можно передавать дальше через rest props и легче типизировать в TypeScript.
Как в Svelte 5 правильно навесить обработчик клика на кнопку?
Блоки {#if} и {#each}
Блок {#if} показывает разметку при истинном условии и поддерживает ветки {:else if} и {:else}. Блок {#each} перебирает массив и рендерит разметку для каждого элемента. Каждый блок открывается решёткой и закрывается слешем: {#if} и {/if}, {#each} и {/each}.
Выражение в круглых скобках после элемента - это ключ. Запись each tasks as task с ключом task.id говорит Svelte, как опознавать каждый элемент списка между обновлениями. Без ключа при изменении массива Svelte может перерисовать больше, чем нужно, или перепутать состояние строк. Ключом стоит брать стабильный уникальный идентификатор, а не индекс массива.
Использовать индекс массива как ключ - частая ошибка. При вставке или удалении элемента в середине индексы сдвигаются, и Svelte сопоставит не те узлы. Это приводит к багам: значение из одного поля ввода вдруг оказывается в соседней строке. Нужен стабильный id.
- {#if условие} ... {:else if другое} ... {:else} ... {/if}
- {#each массив as элемент, индекс (ключ)} ... {/each}
- {#each массив as элемент}{:else} что показать при пустом массиве {/each}
Зачем в блоке {#each tasks as task (task.id)} указывают ключ в круглых скобках?
Блок {#await} для промисов
Загрузка данных - это промис, у которого три состояния: ожидание, успех, ошибка. Блок {#await} выражает все три прямо в разметке. Пока промис не разрешён, показывается первая часть. После успеха - ветка {:then} со значением. При отказе - ветка {:catch} с ошибкой. Ручные флаги loading и error больше не нужны.
Если ветка ожидания не нужна, есть короткая форма await промис then значение - она сразу ждёт успех и не рисует ничего во время загрузки. Блок {#await} реактивен: если переменная с промисом сменится на новый промис, блок снова пройдёт цикл ожидания и покажет свежий результат.
| Ветка | Когда показывается |
|---|---|
| {#await промис} | Пока промис в состоянии ожидания |
| {:then значение} | Когда промис успешно разрешён |
| {:catch ошибка} | Когда промис отклонён |
В SvelteKit данные для страницы чаще готовит функция load, и тогда блок {#await} в разметке нужен реже. Но для запросов, которые стартуют уже после загрузки страницы (по клику, по фильтру), {#await} прямо в разметке остаётся удобным инструментом.
Какие три ветки описывает блок {#await} и чему они соответствуют?
Связь с другими темами
Синтаксис шаблонов соединяет данные с разметкой. Данными управляют руны:
- Компонент .svelte — Все блоки шаблона пишутся внутри разметки компонента
- Реактивное состояние `$state` — Условия и циклы перерисовываются, когда меняется реактивное состояние
- Руны: явная реактивность — Руны связывают выражения в шаблоне с источниками данных
Итог
- Выражения в фигурных скобках вставляют значения в текст и в атрибуты элементов
- Блок {#if} с {:else if} и {:else} условно показывает разметку в зависимости от данных
- Блок {#each массив as элемент} перебирает данные, а ключ в круглых скобках помогает Svelte точно сопоставлять элементы
- Блок {#await промис} рисует разные ветки для состояний ожидания, успеха и ошибки прямо в разметке
- В Svelte 5 события вешаются атрибутами вроде onclick вместо синтаксиса с двоеточием из Svelte 4
Связанные уроки
- sv-03-components — Синтаксис шаблонов живёт в разметке .svelte компонента, поэтому сначала нужен сам компонент
- sv-06-state — Условия и циклы обычно зависят от реактивного состояния через `$state`
- sv-05-runes-intro — Реактивность через руны делает выражения в шаблоне живыми при изменении данных