Question

所以这是在库之上堆积库，但是我不确定还有什么要做。

我们的应用程序具有许多下拉元素，它们都是Bootstrap Select对象。这些用一系列复杂的其他元素替换了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传递的节点之间。

如何掌握样式？

编辑：非常确定这是引导选择中的错误。提出了一个问题

https://github.com/snapappointments/bootstrap-select/issues/2129

Answer 1

您可以尝试通过防止对选项进行后期处理来解决此问题：

在options元素中将foreach绑定替换为select绑定，并用适当的ko绑定绑定每个option。
在元素上调用selectpicker之前，请确保selectPicker绑定已绑定其descendant bindings。
利润！

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 Select中的选定项目

1 个答案: