В библиотеке Choices.js система шаблонов строится вокруг объектов данных, которые передаются в функции генерации DOM-структур. Каждый элемент списка выбора и каждый выбранный элемент представлен унифицированной структурой, содержащей набор стандартных полей и, при необходимости, пользовательские расширения.
Базовый объект, доступный в шаблонах, обычно включает следующие свойства:
Именно через эти поля осуществляется доступ к информации внутри шаблонов, что позволяет формировать сложные интерфейсы без вмешательства в внутреннюю логику компонента.
Основной механизм переопределения шаблонов в Choices.js реализуется
через функцию callbackOnCreateTemplates. Она возвращает
объект с функциями-шаблонами, каждая из которых получает данные элемента
и набор служебных классов.
Типичная сигнатура выглядит следующим образом:
itemTemplate(data, escapeFn)choiceTemplate(data, escapeFn)groupTemplate(data)Ключевым параметром является data, который содержит описанную выше структуру элемента. Через него осуществляется полный доступ ко всем значениям, связанным с конкретной сущностью списка.
Наиболее часто используемые поля — value и label. Они образуют базовую пару данных: значение и отображение.
В шаблонах доступ к ним осуществляется напрямую:
data.value — для атрибутов value или
логики обработкиdata.label — для визуального текстаВ случае кастомных отображений label может быть обёрнут в HTML-структуру, дополнен иконками или дополнительными метками, при этом value остаётся неизменным идентификатором, используемым внутри формы.
Поле customProperties является ключевым механизмом расширения данных внутри Choices.js. Оно позволяет передавать произвольные структуры, не ограниченные стандартной схемой.
Примеры типичных сценариев использования:
Доступ осуществляется напрямую через объект:
data.customPropertiesТакой подход позволяет создавать сложные шаблоны, где визуальное представление зависит от дополнительных параметров, а не только от label.
Шаблон choiceTemplate отвечает за элементы выпадающего
списка. В этом контексте объект data содержит полную
информацию о варианте выбора, включая его состояние.
Особое значение имеют поля:
data.active — элемент в текущем фокусе навигацииdata.disabled — недоступность выбораdata.selected — уже выбранные элементыЭти свойства позволяют формировать динамическую разметку, например:
Шаблон itemTemplate управляет отображением уже выбранных
элементов. Здесь структура данных аналогична, однако поведение
акцентируется на состоянии выбора.
Основные точки доступа:
data.value — идентификатор для удаления или
обработкиdata.label — отображаемое значение внутри выбранного
элементаdata.customProperties — дополнительные визуальные
элементыВ этом шаблоне часто используется логика отображения дополнительных кнопок, индикаторов или визуальных маркеров, основанных на данных объекта.
Если данные организованы в группы, Choices.js передаёт в
groupTemplate объект, описывающий контейнер элементов.
Типичные поля:
data.label — название группыdata.disabled — блокировка всей группыdata.children — массив вложенных элементовДоступ к children позволяет формировать кастомные
структуры списков, включая свёртки, визуальные разделители или вложенные
блоки.
В шаблонах часто передаётся функция экранирования, используемая для безопасного вывода строковых значений.
Она применяется к данным:
escapeFn(data.label)escapeFn(data.value)Это предотвращает вставку потенциально опасного HTML-кода в интерфейс и обеспечивает корректное отображение текста.
При работе с customProperties экранирование также может
применяться выборочно, в зависимости от того, содержит ли поле
HTML-разметку или чистый текст.
Доступ к объекту data внутри шаблонов позволяет строить условные конструкции, полностью определяющие внешний вид элемента.
На основе данных можно:
Таким образом шаблоны становятся не просто функциями отображения, а полноценным уровнем представления данных.
Choices.js использует одни и те же данные, но по-разному интерпретирует их в зависимости от контекста:
Несмотря на различие представлений, объект данных сохраняет единый формат, что обеспечивает консистентность доступа внутри всех шаблонов.
При инициализации Choices.js можно передавать массив объектов, содержащих дополнительные поля. Эти поля автоматически сохраняются и становятся доступны через data без необходимости их преобразования.
Пример логики доступа:
Это позволяет строить сложные UI-компоненты, где источник данных полностью управляет визуальным представлением через шаблоны.