Javascript 淘汰-将样式应用于引导选择中的选定项

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

我们的应用程序有许多下拉元素，它们都是对象。这些元素用一系列复杂的其他元素替换了select中的标准选项标记集，这些元素使您能够更好地控制子项的样式，并使它们可以搜索

这些对象中的大多数都是可重用的组件，具有HTML视图和Typescript视图模型，并用Knockout绑定在一起

许多菜单在文本旁边都有图标。这是通过选项AfterRender处理的。这里有一个例子

视图：

视图模型：

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;
}

导出默认类SelectComponent{
selectedValue：KnockoutObservable；
项目：击倒耳环
构造函数（koObservable:KnockoutObservable）{
//获取和绑定的项目
}
ApplyOptionatAttributes（选项：节点，项目：SelectOption）：无效{
applybindingstoode（选项，{attr:{“数据内容”：``，标题：item.value}}，item）；
}
}
界面选择选项{
值：字符串；
id:字符串
iconurl：字符串；
}

这很好。但是，由于Bootstrap选择其内部项目样式的方式，该图标不会应用于当前选定的项目-它仅在用户单击菜单并弹出时显示

当然，现在我们也需要在当前选中的项目中显示图标。但我不知道如何让元素绑定到它。由于视图模型模式，我无法直接获取它。它似乎不在optionsAfterRender传递的节点中

我怎样才能得到它的风格呢

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

---

您可以尝试通过阻止选项的后处理来解决此问题：

将

选项

绑定替换为

选择

元素中的

foreach

绑定，用适当的ko绑定绑定每个

选项

在对元素调用

selectPicker

之前，请确保selectPicker绑定已绑定

利润

ko.bindingHandler['selectPicker']={
init：函数（元素、valueAccessor、allBindings、viewModel、bindingContext）{
applyBindingsTo子体（bindingContext，元素）；
$（元素）；
返回{ControlsDescentBindings:true}；
}
}
ko.applyBindings({
选择值：可观察到的ko（3），
选项：[
{id:1，名称：“芥末”，dc:“芥末”}，
{id:3，名称：'Ketchup'，dc:'Ketchup'}，
{id:4，名称：'Relish'，dc:'Relish'}
]
});

在单击之前，是否有其他引导样式应用于select？听起来在渲染后初始化
selectPicker（）
时可能会出现问题，这会丢失css绘制。@Levidps感谢您的关注。select标记本身有一些类，由于简洁，我省略了这些类，但我认为没有什么比这更具动态性的了，因为
selectPicker
替换了一些HTML结构，所以初始类很好，它们存在，HTML在初始绘制时存在。我很好奇，因为HTML结构是在渲染之后添加的，它在最初的CSS绘图中丢失了。e、 x.`DOM>CSS>selectPicker>new HTML elements`现在，直到用户单击select按钮，新的CSS绘制才会出现。@Levidps-Hmm。我认为这是引导选择中的一个错误。提出了一个关于这个项目的问题
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;
}