Итак, это складывание библиотек поверх библиотек, но я не уверен, что еще делать.
В нашем приложении есть несколько раскрывающихся элементов, все из которых являются объектами Выбор начальной загрузки. Они заменяют стандартный набор тегов параметров внутри select на сложную серию других элементов, которые дают вам гораздо больший контроль над стилем дочерних элементов и делают их доступными для поиска.
Большинство этих объектов существуют как повторно используемые компоненты с представлением HTML и моделью представления TypeScript, связанными вместе с помощью 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
@Levidps, спасибо, что посмотрели. В самом теге select есть классы, которые я остановил из-за краткости, но ничего динамического
Моя мысль была больше связана с тем, что selectPicker заменяет часть структуры HTML, поэтому с начальными классами все в порядке, потому что они существуют, а html существует при начальном отрисовке. Мне было бы любопытно, потому что структура HTML добавляется после рендеринга, она упускает из виду начальную прорисовку CSS. бывший. `DOM> CSS> selectPicker> new HTML elements`, и теперь новая отрисовка CSS не происходит, пока пользователь не щелкнет по выбранному элементу.
@Levidps Хм. Думаю, это ошибка в bootstrap-select. Подняли вопрос по проекту github.com/snapappointments/bootstrap-select/issues/2129



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вы можете попытаться исправить это, предотвратив постобработку опций:
options на связывание foreach в элементе select, связывая каждый option соответствующими ко-связями.selectpicker для элемента убедитесь, что привязка selectPicker имеет привязку привязки потомков.ko.bindingHandlers['selectPicker'] = {
init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
ko.applyBindingsToDescendants(bindingContext, element);
$(element).selectpicker();
return { controlsDescendantBindings: true };
}
}
ko.applyBindings({
selectedValue: ko.observable(3),
options: [
{ id: 1, name: 'Mustard', dc: '<span class = "badge badge-warning">Mustard</span>' },
{ id: 3, name: 'Ketchup', dc: '<span class = "badge badge-danger">Ketchup</span>' },
{ id: 4, name: 'Relish', dc: '<span class = "badge badge-success">Relish</span>' }
]
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.3/css/bootstrap-select.min.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.3/js/bootstrap-select.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<select data-bind = "selectPicker, value: selectedValue">
<!-- ko foreach: options -->
<option data-bind = "text: name, attr: { value: id, 'data-content': dc }"></option>
<!-- /ko -->
</select>
Применяются ли другие стили Bootstrap к выбранному до щелчка? Похоже, что может быть проблема с инициализацией
selectPicker()после рендеринга, и в ней отсутствует краска css.