将样式应用于下拉选项

Question

我正在使用kickout.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';
            }
        };

Answer 2

您应该能够跟踪selectedView的值是否可观察，并对其的displayName属性进行测试。 如果可能的话，我建议您将displayName设为可观察的。

http://jsfiddle.net/p5T8V/

<select id="views" data-bind="
    options: viewers(),
    optionsText: 'displayName',
    optionsValues: 'id',
    value: selectedView,
    style: { color: ( $parent.selectedView().displayName == 'not ok') ? 'red' : 'black' } ">

<span data-bind="text: selectedView().displayName" />

将跨度放在底部将使您看到selectedView（）。displayName的值。 您需要在样式中添加$ parent的原因是要将元素绑定到selectedView。 使用$（this）.displayName之类的方法可能有一种更有效的方法，但是我没有时间制作一个新项目，并且小提琴只接受一个框架