Работа с checkbox и radio

Slim.js — это лёгкая библиотека для построения компонент с реактивными данными в JavaScript. Работа с элементами форм, такими как checkbox и radio, является важной частью взаимодействия с пользователем. Slim.js позволяет связать состояние этих элементов с реактивными свойствами компонента, что упрощает управление данными и их синхронизацию с интерфейсом.

Связывание checkbox с реактивными свойствами

Checkbox представляет собой элемент, который может находиться в двух состояниях: включено или выключено. В Slim.js можно использовать директиву bind для связывания состояния чекбокса с переменной компонента.

class MyComponent extends Slim {
  static get useShadow() { return true; }

  constructor() {
    super();
    this.checked = false;
  }

  get template() {
    return `
      <label>
        <input type="checkbox" bind="checked">
        Подписка на новости
      </label>
      <p>Статус: {{checked}}</p>
    `;
  }
}

customElements.define('my-component', MyComponent);

В этом примере свойство checked реактивно обновляется при изменении состояния чекбокса. Любое изменение переменной checked автоматически отразится в DOM.

Ключевые моменты:

  • bind="checked" связывает атрибут checked элемента <input> с реактивной переменной.
  • Поддерживается синхронизация в обе стороны: изменения в DOM обновляют свойство, изменения свойства обновляют DOM.
  • Можно использовать {{checked}} для отображения состояния прямо в шаблоне.

Работа с группами checkbox

Для случаев, когда необходимо выбрать несколько значений одновременно, применяются группы чекбоксов. В Slim.js можно связать массив с набором выбранных значений.

class FruitsSelector extends Slim {
  static get useShadow() { return true; }

  constructor() {
    super();
    this.selectedFruits = [];
    this.fruits = ['Яблоко', 'Банан', 'Вишня'];
  }

  get template() {
    return `
      ${this.fruits.map(fruit => `
        <label>
          <input type="checkbox" value="${fruit}" bind-array="selectedFruits">
          ${fruit}
        </label>
      `).join('')}
      <p>Выбрано: {{selectedFruits.join(', ')}}</p>
    `;
  }
}

customElements.define('fruits-selector', FruitsSelector);

Особенности работы с массивами:

  • Директива bind-array связывает выбранные значения чекбоксов с массивом.
  • Добавление или снятие флажка автоматически обновляет массив.
  • Поддерживается динамическое создание элементов на основе данных.

Связывание radio-кнопок

Radio используется для выбора одного варианта из нескольких. В Slim.js связь с реактивным свойством осуществляется через bind, аналогично чекбоксам, но с учетом группировки по атрибуту name.

class GenderSelector extends Slim {
  static get useShadow() { return true; }

  constructor() {
    super();
    this.gender = '';
  }

  get template() {
    return `
      <label>
        <input type="radio" name="gender" value="Мужской" bind="gender">
        Мужской
      </label>
      <label>
        <input type="radio" name="gender" value="Женский" bind="gender">
        Женский
      </label>
      <p>Выбран: {{gender}}</p>
    `;
  }
}

customElements.define('gender-selector', GenderSelector);

Особенности radio-кнопок:

  • Все радио-кнопки в группе должны иметь одинаковый name.
  • Изменение переменной gender обновляет выбранную кнопку, и наоборот.
  • Slim.js автоматически обеспечивает корректное снятие выделения с других кнопок группы при выборе одной.

Обработка событий и динамическое взаимодействие

Хотя bind обеспечивает автоматическую синхронизацию, иногда требуется обработка событий вручную, например, для дополнительных вычислений или логики:

class CustomCheckbox extends Slim {
  static get useShadow() { return true; }

  constructor() {
    super();
    this.checked = false;
  }

  toggle() {
    this.checked = !this.checked;
    console.log('Состояние изменилось на:', this.checked);
  }

  get template() {
    return `
      <label>
        <input type="checkbox" bind="checked" on-click="toggle">
        Активировать
      </label>
      <p>Статус: {{checked}}</p>
    `;
  }
}

customElements.define('custom-checkbox', CustomCheckbox);

Принципы работы с событиями:

  • Директива on-<event> связывает событие DOM с методом компонента.
  • Можно комбинировать bind и обработку событий для сложной логики.
  • Реактивное свойство всегда актуально для дальнейших вычислений или отправки на сервер.

Резюме по особенностям Slim.js при работе с формами

  • Директива bind работает для одиночных checkbox и radio.
  • Директива bind-array подходит для групп чекбоксов.
  • Реактивные свойства автоматически синхронизируются с DOM, поддерживая двустороннюю связь.
  • Методы компонентов позволяют обрабатывать события и расширять стандартное поведение.
  • Поддерживаются динамические шаблоны с использованием массивов и функций map.

Работа с checkbox и radio в Slim.js позволяет создавать гибкие формы, минимизируя количество ручного кода для синхронизации данных и состояния интерфейса.

Оглавление