html - 如何在knockoutjs中对背景颜色样式属性应用三元运算符？

Question

当 .td 文件中有一些数据时，我需要在表中的 td 元素中应用背景颜色。如果没有数据，我不需要任何颜色。我的代码如下:

<td data-bind="text:EarlyOut,style:{background-color:EarlyOut!="" ? '#D2D6DE' : null}" ></td>

我应该写什么来代替 null ？

Answer 1

Knockout 足够智能，不会将 null 写入背景颜色。 代码的问题在于样式属性名称中的 - 字符。

您可以编写 { "background-color": ... } 或 { backgroundColor: ... }

这是一个已修复此问题的可运行示例。请注意，如果 EarlyOut 是可观察属性，则需要 () 来提取其值。

ko.applyBindings({
  setColor: ko.observable(false)
});

div {
  background-color: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div data-bind="style: { backgroundColor: setColor() ? 'green' : null }">
  Hello world
</div>
<label>
  <input type="checkbox" data-bind="checked: setColor">
  Overwrite color
</label>