Что такое Svelte?
Svelte - это компонентный фреймворк, такой как React или Vue, но с важным отличием. Традиционные фреймворки позволяют писать декларативный код, управляемый состоянием, но есть штраф: браузер должен выполнять дополнительную работу для преобразования этих декларативных структур в операции DOM, используя такие методы, как виртуальное различие DOM, которое поглощает ваш бюджет рамок и налог на сборщика мусора.
Вместо этого Svelte запускается во время сборки, преобразовывая ваши компоненты в высокоэффективный императивный код, который хирургически обновляет DOM. В результате вы можете писать амбициозные приложения с превосходными характеристиками производительности.
Хотите узнать больше о Svelte?
Я открыл для себя Svelte всего несколько месяцев назад и был поражен тем, насколько легко начать работу и насколько он эффективен. Я настоятельно рекомендую потратить пару минут на Svelte 3: Переосмысление реактивности и обязательно посмотреть потрясающий доклад Рича Харриса (создателя Svelte.js).
Покажи мне код!
В этой статье предполагается, что вы уже знаете, что такое двусторонняя привязка (или двусторонняя привязка данных).
Двусторонняя привязка к текстовому элементу ввода
При вводе текста мы просто используем bind:value="{someVariable}", чтобы связать атрибут значения элемента ввода с переменной inputVariable.
<script>
let inputValue = '';
</script>
<input type="text" bind:value="{inputValue}"
Двухсторонняя привязка к раскрывающемуся выбору
Для элемента select мы используем тот же подход. Обратите внимание, что с selectValue = "Green" будет предварительно выбран вариант со значением «Зеленый».
<script>
let selectValue = "Green";
</script>
<select bind:value="{selectValue}">
<option value="Red">Red</option>
<option value="Green">Green</option>
</select>
Двухсторонняя привязка к входному радио
Ниже у нас есть два радио входа, и мы хотим, чтобы пользователь выбрал мужской или женский пол в качестве пола. В этом случае мы используем bind:group="{someVariable}", и в этом случае переменная будет содержать либо Male, либо Female. Обратите внимание, что оба входа имеют одинаковый атрибут имени, но разные значения. Это гарантирует, что будет отмечен только один из радиовходов.
<script>
let radioValue = "Male";
</script>
Select Gender: <br>
<label>
<input type="radio" name="gender" value="Male" bind:group="{radioValue}">
Male
</label>
<label>
<input type="radio" name="gender" value="Female" bind:group="{radioValue}">
Female
</label>
Флажок с двухсторонней привязкой при вводе
Ниже у нас есть 3 флажка, и мы хотим, чтобы пользователь выбрал свои любимые фреймворки. В этом случае мы позволяем пользователю выбирать несколько значений. Мы снова будем использовать bind:group="{someVariable}", но в этом случае переменная должна быть массивом, потому что значение каждого флажка будет помещено внутри массива, если флажок установлен.
<script>
let checkboxValue = [];
</script>
<label>
<input type="checkbox" name="framework" value="Vue" bind:group="{checkboxValue}">
Vue
</label>
<label>
<input type="checkbox" name="framework" value="Svelte" bind:group="{checkboxValue}">
Svelte
</label>
<label>
<input type="checkbox" name="framework" value="React" bind:group="{checkboxValue}">
React
</label>
Если мы хотим привязаться к одному флажку и знать, установлен ли он или нет, мы должны использовать bind:checked="{someVariable}", и переменная будет содержать либо true, либо false, указывая, установлен флажок или нет.
<script>
let singleCheckbox = false;
</script>
<label>
Svelte is awesome. Do you agree?
<input type="checkbox" bind:checked="{singleCheckbox}">
</label>
Двусторонняя привязка к пользовательскому элементу (компоненту)
Пользовательский компонент под ним - это просто элемент ввода, который можно привязать из родительского компонента. Уведомление export let prop. Это способ создания стройных опор. Итак, в родительском компоненте мы подключаем экспортируемую переменную из дочернего к переменной в родительском компоненте. В частности, bind:prop="componentValue"
// Parent Component
<script>
import Input from './Input.svelte';
let componentValue = "";
</script>
<Input bind:prop="{componentValue}"/>
//Child Component
<script>
export let prop;
</script>
<input type="text" placeholder="Type Something" bind:value="{prop}">
В приведенном выше примере в пользовательском компоненте я использовал имя опоры prop. Конечно, вы можете использовать любое имя, какое захотите.
В примере thiscodeanbox вы можете найти весь код, который я использовал в этой статье.
Прочтите Svelte Docs о привязках элементов.
Не стесняйтесь комментировать и задавать любые вопросы. Буду рад помочь.
