Привязка данных к полям ввода

Slim.js — это лёгкая и эффективная библиотека для создания компонентов с реактивным обновлением DOM. Одним из ключевых аспектов работы с компонентами является двусторонняя привязка данных к полям ввода, которая позволяет синхронизировать состояние модели и отображение без необходимости вручную отслеживать события input или change.

Директива bind

Для связывания свойства компонента с элементом формы используется директива bind. Она поддерживает все стандартные элементы HTML: <input>, <textarea>, <select> и их разновидности.

Пример привязки текстового поля к свойству компонента:

class UserForm extends Slim {
  name = '';

  constructor() {
    super();
  }

  submitForm() {
    console.log(this.name);
  }
}

UserForm.useTemplate(`
  <form on:submit.prevent="submitForm">
    <input type="text" bind="name" placeholder="Введите имя">
    <button type="submit">Отправить</button>
  </form>
`);

customElements.define('user-form', UserForm);

Здесь bind="name" обеспечивает автоматическую синхронизацию значения поля с свойством name класса. Любое изменение в поле ввода мгновенно обновляет свойство компонента, а при программном изменении this.name — автоматически обновляется отображение в поле.

Поддержка различных типов данных

Для <input> с type="number" или type="checkbox" Slim.js выполняет автоматическое преобразование типов:

<input type="number" bind="age">
<input type="checkbox" bind="isActive">
  • Для чисел строковое значение поля преобразуется в число.
  • Для чекбоксов true/false синхронизируется с состоянием свойства.

Это устраняет необходимость вручную конвертировать типы и следить за состоянием формы.

Связывание с объектами и массивами

Привязка данных работает не только с примитивными типами. Можно связывать поля с вложенными свойствами объектов и элементами массивов. Для этого используется синтаксис с точечной нотацией:

class ProfileForm extends Slim {
  user = {
    firstName: '',
    lastName: ''
  };
}

ProfileForm.useTemplate(`
  <input type="text" bind="user.firstName" placeholder="Имя">
  <input type="text" bind="user.lastName" placeholder="Фамилия">
`);

Изменения в поле firstName автоматически обновят объект user, сохраняя реактивность.

Привязка событий и пользовательская обработка

Иногда требуется выполнять дополнительные действия при изменении поля. Slim.js позволяет комбинировать bind с обработчиками событий on:input или on:change:

<input type="text" bind="email" on:input="validateEmail">

Метод validateEmail класса будет вызываться при каждом вводе, при этом свойство email уже обновлено.

validateEmail() {
  if (!this.email.includes('@')) {
    console.warn('Некорректный email');
  }
}

Это обеспечивает гибкость и контроль без потери автоматической синхронизации.

Привязка к select и option

Для <select> и <option> Slim.js поддерживает привязку через bind:

class CountrySelector extends Slim {
  country = '';
  countries = ['Россия', 'США', 'Германия'];
}

CountrySelector.useTemplate(`
  <select bind="country">
    <option each="countryItem in countries" value="countryItem">{{countryItem}}</option>
  </select>
`);
  • Свойство country автоматически принимает выбранное значение.
  • Любое изменение this.country обновит выделение в списке.

Динамическая привязка и обновление

Привязка в Slim.js полностью реактивна. Если изменяется значение свойства из кода, поле ввода обновляется без дополнительных вызовов setState или render. Пример:

this.name = 'Алексей'; // Поле <input> автоматически отобразит новое имя

Эта функциональность делает работу с формами интуитивной и безопасной, устраняя частые ошибки синхронизации данных.

Особенности и ограничения

  • Привязка работает только для свойств класса компонента, объявленных напрямую или через this.
  • Для сложных структур с глубокими вложениями необходимо убедиться, что свойства реактивны (Slim.js отслеживает изменение ссылок на объекты, а не отдельных вложенных полей без Proxy или специальных методов обновления).
  • Поддерживаются стандартные события формы (input, change) и их комбинация с bind.

Совместная работа с computed свойствами

Привязка данных может быть использована вместе с вычисляемыми свойствами (getter):

class NameForm extends Slim {
  firstName = '';
  lastName = '';

  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

NameForm.useTemplate(`
  <input type="text" bind="firstName">
  <input type="text" bind="lastName">
  <p>Полное имя: {{fullName}}</p>
`);

fullName обновляется автоматически при изменении firstName или lastName, демонстрируя реактивность цепочек привязки.

Итоговые принципы работы привязки данных

  1. Автоматическая синхронизация между свойством компонента и элементом формы.
  2. Поддержка различных типов элементов: текст, число, чекбокс, select.
  3. Реактивность вложенных объектов и массивов через точечную нотацию.
  4. Комбинация с обработчиками событий для дополнительной логики.
  5. Поддержка computed свойств, обновляющихся при изменении зависимостей.

Привязка данных в Slim.js делает формы и пользовательский ввод максимально прозрачными, сокращая объем кода и устраняя необходимость вручную следить за состоянием полей.

Оглавление