Получение экземпляра

Работа с Tom Select всегда строится вокруг объекта экземпляра, который создаётся при инициализации и содержит весь публичный API: управление значениями, элементами, поиском, опциями и жизненным циклом компонента. Корректное получение и сохранение этого экземпляра определяет возможность дальнейшего программного управления селектом.

Создание экземпляра при инициализации

Основной способ получения экземпляра — прямое создание через конструктор. При вызове new TomSelect(...) возвращается объект, который сразу можно использовать для управления компонентом.

const select = new TomSelect('#select-element', {
    create: true,
    maxItems: 5,
    placeholder: 'Выбор значения'
});

Переменная select в данном случае содержит полный экземпляр, связанный с указанным DOM-элементом. Этот объект становится точкой входа для всех дальнейших операций: добавления, удаления, фильтрации и изменения состояния.

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

Сохранение экземпляра при динамической инициализации

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

const selects = {};

document.querySelectorAll('.ts').forEach((el, index) => {
    selects[index] = new TomSelect(el, {
        maxItems: 3
    });
});

Такой подход позволяет централизованно управлять всеми экземплярами и обращаться к ним по идентификатору, DOM-узлу или логическому ключу.

Получение экземпляра через DOM-элемент

После инициализации Tom Select сохраняет ссылку на свой экземпляр непосредственно в DOM-элементе. Это позволяет получить доступ к уже созданному объекту без необходимости хранить переменные.

const el = document.querySelector('#select-element');
const instance = el.tomselect;

Свойство tomselect появляется на исходном <select> после инициализации. Оно содержит тот же объект, который был создан конструктором.

Этот способ особенно полезен в следующих случаях:

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

Повторное получение экземпляра при повторной инициализации

При попытке повторной инициализации на одном и том же элементе важно учитывать, что экземпляр уже существует. Обычно Tom Select предотвращает дублирование, но доступ к текущему объекту остаётся через DOM-свойство.

const el = document.querySelector('#select-element');

if (el.tomselect) {
    el.tomselect.clear();
}

Здесь используется проверка существования экземпляра перед выполнением операций. Такой подход предотвращает создание конфликтующих состояний.

Работа с экземпляром в динамически созданных элементах

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

function createSelect(container) {
    const select = document.createElement('select');
    container.appendChild(select);

    const instance = new TomSelect(select, {
        create: true
    });

    return instance;
}

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

Управление жизненным циклом экземпляра

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

const ts = new TomSelect('#select', {});

ts.addOption({ value: '1', text: 'Первый' });
ts.addItem('1');
ts.clear();
ts.destroy();

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

Особенности хранения ссылок

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

class SelectManager {
    constructor() {
        this.instances = new Map();
    }

    init(el) {
        const instance = new TomSelect(el, {});
        this.instances.set(el, instance);
    }

    get(el) {
        return this.instances.get(el) || el.tomselect;
    }
}

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

Поведение при уничтожении экземпляра

После вызова destroy() ссылка в DOM может сохраняться, но становится неактуальной для управления компонентом.

const el = document.querySelector('#select');
const ts = el.tomselect;

ts.destroy();

// el.tomselect может быть очищен или устареть

Поэтому при работе с динамическими интерфейсами важно синхронизировать состояние приложения и фактическое состояние DOM-элементов.

Использование экземпляра в обработчиках событий

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

const ts = new TomSelect('#select', {
    onChange(value) {
        console.log('Изменено значение:', value);
        this.refreshOptions();
    }
});

Внутри обработчиков this указывает на текущий экземпляр, что делает возможным прямое управление компонентом без дополнительных ссылок.

Итоговые способы доступа к экземпляру

В рамках одной страницы применяются несколько стандартных методов получения экземпляра:

  • сохранение результата new TomSelect(...);
  • доступ через element.tomselect;
  • хранение в коллекциях приложения;
  • использование this внутри событийных обработчиков.

Каждый способ ориентирован на разные сценарии архитектуры, но все они приводят к одному объекту — экземпляру Tom Select, через который выполняется всё управление компонентом.

Оглавление