Question

在选择列表上使用'options'绑定时，是否可以更改选择列表的选项元素的样式（使用'style'或'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和isDefault属于combinedComponent）：

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>

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

4 个答案: