css - knockoutjs 数据绑定(bind)中基于条件的类

Question

knockoutjs 数据绑定(bind)中基于条件的类。

请大家指出错误之处

function blahBlah() {
  var self = this;
  self.isColorRed = ko.observable(true);
}
ko.applyBindings(new blahBlah());

body {
  background-color: green;
}

.colorRed {
  background-color: red;
}

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

<div>Green everywhere</div>
<div class="colorRed">RED without Bind</div>
<div data-bind="class: {colorRed:isColorRed}">Should be red</div> <!-- not working -->

Answer 1

需要使用isColorRed作为函数，同时使用css关键字

function blahBlah() {
  var self = this;
  self.isColorRed = ko.observable(true);
}
ko.applyBindings(new blahBlah());

body {
  background-color: green;
}

.colorRed {
  background-color: red;
}

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

<div>Green everywhere</div>
<div class="colorRed">RED without Bind</div>
<div data-bind="css: { colorRed: isColorRed() }">Should be red</div>