Knockout - применение стилей к выбранному элементу в Bootstrap Select - PullRequest
Новая
       44

Knockout - применение стилей к выбранному элементу в Bootstrap Select

0 голосов
/ 23 октября 2018

Так что это сваливание библиотек поверх библиотек, но я не уверен, что еще делать.

В нашем приложении есть несколько раскрывающихся элементов, каждый из которых 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

1 Ответ

0 голосов
/ 11 декабря 2018

Вы можете попытаться исправить это, предотвратив постобработку параметров:

  1. Замените привязку options на привязку foreach в элементе select, привязывая каждую option с соответствующими k-привязками.
  2. Убедитесь, что привязка selectPicker имеет привязки к потомку , прежде чем вызывать selectpicker для элемента.
  3. Прибыль! 

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>
...