我正在使用 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>
当我不向下拉列表添加样式绑定(bind)时,它会按预期工作。我可以做一个简单的比较(即 1 == 1)并且它有效(尽管所有选项都变成红色)。我想要做的是将“displayName”属性与一些任意文本进行比较。它现在只是一个字符串,包含任何文本,但稍后将从我的 ViewModel 调用此字符串。
如果我的 View 模型需要,这将允许我以不同的样式设置某些选项。有什么想法吗?
最佳答案
我的解决方案是使用 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';
}
};
关于javascript - knockout.js 将样式应用于下拉选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17703328/