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

Библиотека Slim Select предоставляет программный API для полного контроля над состоянием выпадающих списков без необходимости взаимодействия с DOM напрямую. Состояние компонента включает выбранные значения, список доступных опций, фильтр поиска, режимы доступности и внутренние флаги интерфейса. Управление этим состоянием через API позволяет синхронизировать UI с внешними источниками данных, серверными ответами и реактивными системами.

Архитектура состояния компонента

Внутреннее состояние Slim Select можно условно разделить на несколько логических блоков:

  • selected — массив или значение выбранных элементов
  • options — текущий набор доступных опций
  • search — строка поискового фильтра
  • disabled — флаг активности компонента
  • isOpen — состояние раскрытия списка

Каждый из этих элементов может изменяться программно через публичные методы экземпляра Slim Select.

Инициализация и получение доступа к экземпляру

При создании экземпляра сохраняется ссылка на объект управления:

const select = new SlimSelect({
  select: '#mySelect'
});

Объект select становится точкой входа для всех операций управления состоянием.

Программная установка выбранных значений

Основной механизм управления состоянием — метод установки выбранных значений. Он поддерживает как одиночный, так и множественный выбор.

select.set('value1');

Для мультиселекта:

select.set(['value1', 'value2', 'value3']);

При вызове метода происходит:

  • обновление внутреннего состояния selected
  • синхронизация DOM <select>
  • перерисовка UI компонента
  • вызов событий изменения состояния

Особенность заключается в том, что передаваемые значения должны совпадать с value опций, а не с их текстовым содержимым.

Сброс состояния выбора

Сброс осуществляется передачей пустого значения:

select.set([]);

Для одиночного селекта допустимо:

select.set(null);

После сброса компонент возвращается в исходное состояние без активных выбранных элементов, при этом список опций сохраняется.

Управление списком опций

Slim Select позволяет динамически изменять доступные значения без пересоздания экземпляра.

Полная замена набора данных

select.setData([
  { text: 'Option A', value: 'a' },
  { text: 'Option B', value: 'b' }
]);

При выполнении операции:

  • старые опции удаляются из состояния
  • формируется новый список options
  • пересобирается DOM списка
  • пересчитываются выбранные значения (если пересекаются)

Частичное добавление опций

Добавление новых элементов без полной перезагрузки:

select.addData([
  { text: 'Option C', value: 'c' }
]);

Подход используется при реализации бесконечной прокрутки, подгрузки с сервера или incremental search.

Удаление опций из состояния

Удаление конкретной опции по значению:

select.removeOption('value1');

При удалении:

  • элемент удаляется из options
  • если значение было выбрано, оно исключается из selected
  • UI обновляется синхронно

Программное управление поиском

Состояние поискового фильтра может контролироваться через API:

select.search('query');

или сбрасываться:

select.search('');

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

Открытие и закрытие списка

Состояние раскрытия контролируется напрямую:

select.open();
select.close();

Дополнительно доступно переключение:

select.toggle();

Состояние isOpen обновляется синхронно, что позволяет привязывать логику интерфейса к моменту открытия списка.

Включение и отключение компонента

Slim Select поддерживает режим блокировки взаимодействия:

select.disable();
select.enable();

В отключённом состоянии:

  • блокируется ввод и выбор
  • игнорируются клики по опциям
  • визуально применяется disabled-стиль
  • сохраняется текущее состояние selected

Синхронизация состояния с внешними источниками данных

Программное управление состоянием часто используется совместно с API-запросами:

fetch('/api/options')
  .then(res => res.json())
  .then(data => {
    select.setData(data);
  });

После получения данных:

  • обновляется список опций
  • состояние выбора может быть восстановлено или пересчитано
  • интерфейс остаётся консистентным без пересоздания компонента

Работа с зависимыми состояниями

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

countrySelect.set(['kz']);

citySelect.setData([
  { text: 'Karaganda', value: 'karaganda' },
  { text: 'Astana', value: 'astana' }
]);

citySelect.set([]);

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

Принудительное обновление интерфейса

В некоторых сценариях требуется синхронизация состояния без его изменения:

select.render();

Метод пересобирает визуальное представление на основе текущих данных selected и options. Используется при внешнем изменении DOM или вмешательстве других скриптов.

Управление множественным выбором

В режиме multiple состояние selected представляет массив значений. Все операции учитывают этот факт:

  • добавление значения — объединение массивов
  • удаление значения — фильтрация массива
  • установка — полная замена массива

Пример последовательного обновления:

select.set(['a']);
select.set([...select.selected(), 'b']);

Контроль состояния через события

Slim Select предоставляет события изменения состояния, которые позволяют отслеживать любые программные изменения:

  • изменение выбора
  • открытие/закрытие списка
  • обновление данных

Подписка на события позволяет синхронизировать внешнюю бизнес-логику с внутренним состоянием компонента без опроса DOM.

Интеграция с реактивными системами

При использовании с реактивными фреймворками программное управление состоянием становится центральной точкой синхронизации. Slim Select выступает как внешний контролируемый компонент, где:

  • источник истины хранится вне компонента
  • UI отражает текущее состояние через set и setData
  • изменения проксируются через API, а не через DOM-манипуляции

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

При частом программном обновлении состояния необходимо учитывать:

  • асинхронность обновления DOM при больших наборах данных
  • возможные конфликты между внешним изменением <select> и внутренним состоянием
  • необходимость последовательного вызова методов при каскадных изменениях

Стабильность состояния обеспечивается последовательным применением API-методов без прямого вмешательства в DOM-структуру компонента.

Оглавление