knockout.js将样式应用于下拉选项

Question

我正在使用knockout.js编写下拉列表:

views()是使用REST通过JSON实例化的对象数组.displayName是这些对象的String属性,不可观察.我想比较displayName属性,如果它匹配某个单词,我想将一些样式应用于该选项.

<select id="views" data-bind="
    options: views(),
    optionsText: 'displayName',
    optionsValues: 'id',
    value: selectedView,
    style: { color: ( displayName == 'some arbitrary text') ? 'red' : 'black' }
 "></select>

当我不添加样式绑定时,下拉按预期工作.我可以做一个简单的比较(即1 == 1)并且它有效(尽管所有选项都变为红色).我想要做的是将'displayName'属性与一些任意文本进行比较.它现在只是一个字符串,包含任何文本,但稍后将从我的ViewModel调用此字符串.

这将允许我以不同的样式设置某些选项,如果我的视图模型需要它们.有任何想法吗？

Answer 1

我的解决方案是使用optionsAfterRender回调:

<select id="views" data-bind="
                         options: views(),
                         optionsText: 'displayName',
                         optionsValue: 'id',
                         value: selectedView,
                         optionsAfterRender: optionsAfterRender
                      "></select>

然后在我的模型中:

self.optionsAfterRender = function(option, view) {
            if (view.defaultView) {
                option.className = 'defaultViewHighlight';
            }
        };