8

在选择列表上使用“选项”绑定时，是否可以更改选择列表选项元素的样式（使用“样式”或“CSS”绑定）？或者这只能通过在选择列表上使用“foreach”并更改每个样式的样式来完成？

我在代码中有这个：

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

但如果我追加，则如果返回 false style: {color: isDefault() === true ? 'black' : 'red'}，则整个列表将变为红色。isDefault

以这种方式对其进行编码是实现此目的的唯一方法：

<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 魔法？

谢谢！

4

4 回答 4

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属于组合组件）：

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

如果您不确定是什么call，请查看bind vs apply vs call

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

于 2015-10-01T23:13:41.773 回答
1

要回答您的问题，是的，这是我认为的最佳方式。

使用style: {color: isDefault() === true ? 'black' : 'red'}您将样式绑定（添加）到关联的 DOM 元素的代码。在这种情况下，整个<select>标签。不是<option>你想要的标签。这就是你的整个列表改变颜色的原因。

查看knockoutjs 文档以获取有关样式绑定的更多信息。

于 2013-04-16T19:56:15.480 回答
1

尝试“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>

于 2018-09-13T18:19:05.193 回答
0

总结一下已经说过的内容，我发现 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>

于 2015-11-18T16:21:27.690 回答