Так что это сваливание библиотек поверх библиотек, но я не уверен, что еще делать.
В нашем приложении есть несколько раскрывающихся элементов, каждый из которых Bootstrap Select объекты.Они заменяют стандартный набор тегов параметров внутри выбора на сложную серию других элементов, которые дают вам гораздо больший контроль над стилем дочерних элементов и делают их доступными для поиска.
Большинство этих объектов существуют как компоненты многократного использования сHTML-представление и Typescript ViewModel, связанные вместе с Knockout.
Ряд этих меню имеют значки рядом с текстом.Это обрабатывается с помощью optionsAfterRender.Вот пример.
Просмотр:
<select
data-bind="options: items,
value: selectedValue,
optionsText: 'value',
optionsValue: 'id',
selectPicker: {},
optionsAfterRender: applyOptionAttributes">
</select>
ViewModel:
export default class SelectComponent {
selectedValue: KnockoutObservable<string>;
items: KnockoutObservableArray<SelectOption>
constructor(koObservable: KnockoutObservable<string>) {
// items fetched and bound
}
applyOptionAttributes(option: Node, item: SelectOption): void {
ko.applyBindingsToNode(option, { attr: { "data-content": `<img src="${item.iconurl}" />`, title: item.value } }, item);
}
}
interface SelectOption {
value: string;
id: string
iconurl: string;
}
И это нормально.Однако из-за того, как Bootstrap Select стилизует элементы внутри него, значок не применяется к выбранному в данный момент элементу - он отображается только тогда, когда пользователь нажимает на меню, и он появляется.
Теперь, конечно,, у нас есть требование отображать значок в выбранном элементе тоже.Но я не знаю, как заставить этот элемент привязываться к нему.Я не могу получить его напрямую из-за паттерна view-viewmodel.Похоже, он не входит в число узлов, переданных optionsAfterRender.
Как мне его стилизовать?
РЕДАКТИРОВАТЬ: почти наверняка это ошибка в bootstrap-select.Подняли вопрос
https://github.com/snapappointments/bootstrap-select/issues/2129