Метод addData

Назначение и поведение метода

Метод addData в Slim Select используется для динамического добавления новых элементов в уже инициализированный список. В отличие от полной замены данных через setData, данный метод выполняет инкрементальное расширение существующего набора опций без разрушения текущего состояния выбранных значений и без повторной инициализации компонента.

Ключевая особенность заключается в том, что addData работает поверх уже существующей структуры данных, сохраняя:

  • текущее состояние выбранных значений;
  • текущую фильтрацию (если активна);
  • состояние раскрытого списка;
  • внутренние ссылки на DOM-элементы.

Метод предназначен для сценариев, где данные подгружаются постепенно: пагинация, lazy loading, результаты поиска по API.

Сигнатура метода

Формально метод вызывается на экземпляре Slim Select:

select.addData(data);

где data — массив объектов, соответствующих формату Slim Select:

{
  text: 'Отображаемый текст',
  value: 'уникальное_значение',
  selected: false,
  disabled: false,
  innerHTML: '<span>HTML содержимое</span>',
  data: { ...любые пользовательские данные }
}

Структура входных данных

Каждый элемент массива, передаваемого в addData, должен соответствовать внутреннему контракту библиотеки.

Основные поля

  • text Отображаемое значение в списке. Используется для визуализации опции.

  • value Уникальный идентификатор. Именно он участвует в выборе и сравнении значений.

  • selected Булево значение. Определяет, будет ли элемент автоматически выбран после добавления.

  • disabled Отключает возможность выбора элемента.

Дополнительные поля

  • innerHTML Позволяет заменить стандартный рендеринг кастомным HTML. При наличии этого поля text может игнорироваться при отображении.

  • data Пользовательский объект для хранения метаданных. Не участвует в логике UI напрямую, но доступен через API.

Принцип работы внутри Slim Select

При вызове addData происходит несколько внутренних этапов:

  1. Валидация входного массива Проверяется наличие обязательных полей (text, value).

  2. Фильтрация дубликатов Элементы с уже существующими value игнорируются. Slim Select использует value как уникальный ключ.

  3. Генерация внутренних моделей Каждый объект преобразуется в внутренний формат библиотеки.

  4. Обновление состояния компонента Новые элементы добавляются в:

    • список опций;
    • внутренний индекс поиска;
    • DOM-дерево (если список открыт или рендерится динамически).

  5. Сохранение выбранных значений Текущее состояние selection не сбрасывается.

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

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

select.addData([
  { text: 'JavaScript', value: 'js' },
  { text: 'TypeScript', value: 'ts' }
]);

После выполнения к списку добавляются две новые опции без перерисовки всей структуры.

Добавление элементов с предвыбором

Если требуется сразу выбрать добавляемые элементы, используется поле selected:

select.addData([
  { text: 'React', value: 'react', selected: true },
  { text: 'Vue', value: 'vue', selected: false }
]);

В этом случае Slim Select автоматически обновит состояние выбранных значений и синхронизирует UI.

Работа с кастомным HTML

Slim Select допускает использование HTML внутри опций через innerHTML:

select.addData([
  {
    text: 'GitHub',
    value: 'github',
    innerHTML: '<strong>GitHub</strong> — репозиторий'
  }
]);

При наличии innerHTML библиотека использует его вместо стандартного текстового рендера, что позволяет создавать сложные визуальные элементы списка.

Интеграция с асинхронными источниками данных

Типичный сценарий применения addData — подгрузка данных с API:

fetch('/api/languages')
  .then(res => res.json())
  .then(data => {
    select.addData(
      data.map(item => ({
        text: item.name,
        value: item.code
      }))
    );
  });

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

Поведение при дублировании значений

Slim Select использует строгую проверку по value. Если в addData передан элемент с уже существующим значением:

{ text: 'JavaScript', value: 'js' }

и такой value уже есть в списке, элемент будет проигнорирован.

Это предотвращает:

  • засорение списка дублями;
  • конфликт выбора;
  • нарушение внутреннего индекса.

Влияние на выбранные значения

Добавление данных не сбрасывает текущие выбранные элементы. Однако при совпадении value с уже выбранным элементом возможны два сценария:

  • элемент уже выбран — состояние сохраняется;
  • элемент добавляется как новый и сразу помечается как выбранный (selected: true) — происходит синхронизация выбора.

Особенности работы с disabled-элементами

Если добавляемый объект содержит:

disabled: true

он отображается в списке, но не может быть выбран. Такие элементы полезны для:

  • разделителей;
  • заголовков групп;
  • временно недоступных опций.

Отличие от setData

Поведение addData setData
Очистка текущих данных нет да
Сохранение выбора да нет
Перерисовка списка частичная полная
Использование инкремент полная замена

addData применяется в ситуациях, где важно сохранить состояние компонента и расширить его без разрушения текущей структуры.

Работа с фильтрацией и поиском

При активном поиске новые элементы автоматически попадают в индекс поиска. Однако они могут не отображаться сразу, если не соответствуют текущему фильтру.

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

Внутренние ограничения

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

  • большое количество элементов может замедлить обновление DOM;
  • отсутствие виртуализации списка приводит к линейному росту затрат на рендеринг;
  • частые вызовы addData подряд могут вызывать избыточные перерасчёты.

Рекомендуется агрегировать данные и передавать их одним массивом.

Сценарии использования в реальных приложениях

Наиболее характерные случаи применения:

  • подгрузка справочников из API;
  • динамическое расширение списка по мере ввода пользователя;
  • объединение данных из нескольких источников;
  • постепенная загрузка больших каталогов;
  • добавление пользовательских значений (custom options).

Поведение при пустом массиве

Если addData([]) вызывается с пустым массивом, состояние компонента не изменяется. Ошибки не возникает, операция считается безопасной и идемпотентной.

Обработка некорректных данных

При передаче объектов без обязательных полей:

{ text: 'Test' } // отсутствует value

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

Влияние на производительность

Основные факторы, влияющие на скорость работы addData:

  • размер добавляемого массива;
  • сложность innerHTML;
  • текущее состояние DOM (открыт/закрыт список);
  • количество уже загруженных опций.

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

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

Последовательные вызовы:

select.addData([...]);
select.addData([...]);
select.addData([...]);

обрабатываются как независимые операции. Каждый вызов инициирует обновление индексов и DOM, что может привести к избыточным перерасчётам при частом использовании.

Оглавление