Knockout.js改变颜色 什么时候使用'选项'绑定？

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 docs。

Answer 2

为了扩展Thomas Wiersema的答案，你想要在每行的基础上处理它的方式如下：

<select id="components-select" size="4" name="components-select"
                    data-bind="foreach: combinedComponents">
<option data-bind="value: id, text: displayName, style: {color: getColorFor.call(null, $data) }"></option>
</select>

然后，在JavaScript中，将一个函数附加到您的父对象（我正在做一些假设，当然，就像您的父对象被称为vm和属于combinedComponent的isDefault）：

vm.getColorFor = function(component) {
    return component.isDefault() === true ? 'black' : 'red';
}

如果您不确定call的作用，请查看bind vs apply vs call

我希望有所帮助 - 如果我能详细说明，请告诉我！

Answer 3

为了总结已经说过的内容，我发现Knockout的一个特点是被忽略了很多，在这些情况下非常方便：$index。例如，我正在制作一个列表，我希望列表中的第一个选项为黑色，其余选项为红​​色。所以我可以修改你的第二个选项，如下所示：

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

或者，如果您想要替换颜色，只需使用模数检查。

<select id="components-select" size="4" name="components-select"
                        data-bind="foreach: combinedComponents">
        <option data-bind="value: id, text: displayName, 
                           style: {color: $index % 2 === 1 ? 'black' : 'red'}"></option>
</select>

Answer 4

试试'optionsAfterRender'绑定，在这种情况下工作正常。 http://jsfiddle.net/cZRJN/243/

var viewModel = function() {
  
  this.combinedComponents = ko.observableArray([{
displayName: 'item1',
id: 1,
isDefault:true
  }, {
displayName: 'item2',
id: 2,
isDefault:false
  }, {
displayName: 'item3',
id: 3,
isDefault:true
  }]);
  
  OptionsAfterRender = (option, item) => {
    
    ko.applyBindingsToNode(option, {style: { color: item.isDefault ? 'red' : 'black'}}, item);
};
  
  
  this.chosenComponent= ko.observable(1);
}

ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

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