使用'options'绑定时,Knockout.js会改变颜色od <option>吗？

Question

当在选择列表上使用"选项"绑定时,是否可以更改选择列表的选项元素的样式(使用"样式"或"css"绑定)？或者这只能通过在选择列表上使用'foreach'并改变每个样式来完成吗？

我在代码中有这个:

<select id="components-select" size="4" name="components-select"
                        data-bind=" options: combinedComponents, 
                                    optionsText: 'displayName', 
                                    optionsValue: 'id', 
                                    value: chosenComponent"></select>

但如果我追加,style: {color: isDefault() === true ? 'black' : 'red'}那么如果isDefault返回false,则整个列表的颜色为红色.

实现此目的的唯一方法是以这种方式编码:

<select id="components-select" size="4" name="components-select"
                        data-bind="foreach: combinedComponents">
    <option data-bind="value: id, text: displayName, style: {color: isDefault() === true ? 'black' : 'red'}"></option>
</select>

或者是否有一些我不知道的Knockout.js魔法形式？

谢谢!

Answer 1

回答你的问题，是的，这是我认为最好的方式。

使用代码style: {color: isDefault() === true ? 'black' : 'red'}将样式绑定（添加）到关联的 DOM 元素。在本例中是整个<select>标签。不是<option>你想要的标签。这就是为什么你的整个列表会改变颜色。

有关样式绑定的更多信息，请参阅knockoutjs 文档。