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

Question

我需要在 table 中的 td 元素中应用背景颜色，当 .如果没有数据，我不想要任何颜色。我的代码如下：

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

我应该写什么来代替 null？

Answer 1

这与 CSS 的关系大于 knockout.js，你应该写 'none'（一个字符串！）而不是 null，至少如果你想要的话如果您的条件是false.

，则没有背景色

Answer 2

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>

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

How to apply ternary operator for background-color style attribute in knockoutjs?

html

knockout.js