Связывание форм через bind:

Директива bind: связывает значение элемента с состоянием двусторонне — удобнее, чем пара значение+обработчик.

«Зачем писать пять строк, если хватит одной?» bind:value — это сахар, который убирает рутину синхронизации поля и состояния.

Связывать поле ввода с состоянием можно вручную: задать value и слушать oninput. Но это многословно. Директива bind: делает то же самое в одну строку и в обе стороны. bind:value на <input> синхронизирует значение поля с переменной: пользователь печатает — состояние меняется; меняете состояние — поле обновляется.

Биндинги есть на множество вещей: bind:value для текстовых полей и select, bind:checked для чекбоксов, bind:group для радиокнопок, bind:files для загрузки, а также биндинги на размеры элемента и даже на DOM-узел через bind:this.

<script>
  let name = $state('');
  let agree = $state(false);
  let size = $state('M');
</script>

<input bind:value={name} placeholder="Имя" />
<label><input type="checkbox" bind:checked={agree} /> Согласен</label>
<select bind:value={size}>
  <option>S</option><option>M</option><option>L</option>
</select>

<p>{name}, размер {size}, согласие: {agree}</p>

Без биндинга каждый из этих элементов потребовал бы отдельный обработчик. С bind: состояние — единственный источник истины, и оно всегда синхронно с тем, что видит пользователь. Это особенно ценно в формах с десятком полей.

Как это работает под капотом

bind:value — это сокращение для пары «установить значение + слушать изменение». Компилятор разворачивает его обратно в value и обработчик. Смоделируем это разворачивание.

// bind:value = установка значения + слушатель ввода
function makeBinding(initial, onRender) {
  let value = initial;
  onRender(value); // начальная отрисовка
  return {
    input(newValue) { value = newValue; onRender(value); }, // пользователь ввёл
    set(v) { value = v; onRender(value); }                  // программно поменяли
  };
}

const name = makeBinding('', v => console.log('поле и состояние:', v || '(пусто)'));
name.input('Аня');   // поле и состояние: Аня
name.set('Борис');   // поле и состояние: Борис (обновили программно)

Попробуй сам ▶ — вставь код в консоль браузера (F12 → Console) и нажми Enter, чтобы увидеть вывод.

  $state name  <===== bind:value =====>  <input>
      ^                                     |
      |  пользователь печатает              |
      +-------------------------------------+
  оба конца всегда синхронны

Частые ошибки

• Связывать bind:value с производным значением. Биндить можно только записываемое $state.
• Путать bind:checked и bind:value. Для чекбоксов нужен checked.
• Дублировать ручной обработчик поверх биндинга. Это конфликтует — выберите одно.

Best practices

• Используйте bind: для форм — это убирает шаблонный код и держит одно состояние истины.
• Подбирайте правильный биндинг под тип элемента: value, checked, group, files.
• Для ссылки на DOM-элемент применяйте bind:this, когда нужен прямой доступ к узлу.

Формы без боли

Работа с формами — традиционно одна из самых утомительных частей фронтенда, и именно здесь bind: экономит больше всего сил. Представьте форму регистрации с именем, почтой, паролем, согласием на обработку данных и выбором тарифа. Без биндинга каждое из этих полей потребовало бы и атрибута значения, и отдельного обработчика ввода — десятки строк однообразного кода, в которых легко ошибиться. С bind: каждое поле связывается с состоянием одной короткой директивой, а состояние становится единым источником истины: что в нём лежит, то и видит пользователь, и наоборот. Это даёт побочные удобства — валидацию легко повесить на производное значение от состояния формы, а отправку — собрать из того же состояния одним объектом. Подбирайте биндинг под тип элемента: value для текста и списков, checked для флажков, group для радиогрупп, files для загрузки. Освоив их, вы перестанете воспринимать формы как рутину.

Итог: bind: двусторонне связывает свойство элемента с реактивным состоянием. Это краткая замена паре «значение + обработчик» и основа удобной работы с формами.