В документация svelte не нашел подходящих примеров работы с checkbox в each block, которые помогли бы моим задачам. Пришлось придумать несколько своих вариантов.
Варианты работы с input type text в each block фреймворка svelte можно узнать из статьи группировка и сохранение данных в each block.
Вариант сохранения статусов чекбоксов на svelte
Получаем данные с бэкенда по которым построим страницу.
import {onMount} from "svelte";
let portfolio = [];
onMount(async () => {
getFetch('portfolio/get-tracking-shares/').then((r) => {portfolio = r});
});
</script>
Добавляем функцию отправки данных на бэкенд с новым статусом checkbox.
function changeValue(e, share) {
let current = e.target.checked;
getFetch('portfolio/save-share-tracking/' + share.ticker + '/' + checked);
}
</script>
Дальше прокидываем событие в эту функцию таким способом:
Полностью сформированные данные выглядят так:
<div class="body">
{#each portfolio as share}
<div class="item">
<div class="cell name">{share.name}</div>
<div class="cell tracking">
<label>
{#if share.tracking === true}
<input type="checkbox" on:change={(e) => changeValue(e, share)} checked>
{:else}
<input type="checkbox" on:change={(e) => changeValue(e, share)}>
{/if}
</label>
</div>
</div>
{/each}
</div>
</div>
Это все! Наша таблица в Svelte замечательным образом работает и отправляет новые данные по статусу чекбокаса на бэкенд.
Альтернативный вариант на JS
То же самое мы можем сделать добавив немножко больше обычного кода JS. Мы все также еще используем Svelte. Однако событие чекбокса отловим по addEventListener.
Пример выше проще, но этот приведен для хардкора.
В этом случае код внутри script будет таким:
onMount(async () => {
// Получим ID таблицы
let table = document.getElementById('Portfolio');
// Повесим событие на клик с помощью addEventListener
table.addEventListener("click", function (e) {
if (e.target.nodeName === 'INPUT') {
let current = e.target,
ticker = current.dataset.ticker,
checked = current.checked;
getFetch('portfolio/save-share-tracking/' + ticker + '/' + checked);
}
});
});
</script>
Сама таблица тоже немножко преобразится. Сюда добавилось id таблицы и дата-атрибуты.
<div class="body">
{#each portfolio as share}
<div class="item">
<div class="cell tracking">
<label>
{#if share.tracking === true}
<input type="checkbox" data-ticker="{share.ticker}" checked>
{:else}
<input type="checkbox" data-ticker="{share.ticker}">
{/if}
</label>
</div>
</div>
{/each}
</div>
</div>
