Knockout JS -将css类绑定到元素

Question

我想实现动态类隐藏，它应该根据变量分配和重新分配正确的类，放在这个字段中。我得到的问题是，当我诱导函数setRed()，然后setWhite()时，两个颜色类都被绑定，当然第一个CSS类被考虑。

我有一个元素它的绑定是这样的

<div data-bind='dxNumberBox: dxCustomCalc'></div>

到目前为止，我使elementAttr类ko.observable();

self.dxCustomCalc = {
displayExpr: 'Name',
keyExpr: 'Id',
value: self.customCalc,
//onValueChanged: function (e) {
//    self.childFormName(e.component.option('selectedItem'));
//},
disabled: ko.computed(function () {
return self.readOnly;
}),
elementAttr: {
/*   class: "is-valid-nok"*/        /* - red*/
/*class: "is-valid-onlyok"  */    /* -white */
/*class: "is-required-empty",*/  /* - yellow */
class: ko.observable(),
}
};

并通过element:

function setRed() {
self.dxCustomCalc.elementAttr.class("is-valid-nok");
console.log("color changed to red")
}
function setWhite(){
self.dxCustomCalc.elementAttr.class("is-valid-onlyok");
console.log("color changed to white")
}

函数根据字段中的值执行。例如，如果value匹配，则触发setRed()函数。然后，如果值改变并且满足条件，则触发setWhite()函数。在对元素订阅执行两个函数后，我得到的结果是:

<div data-bind="dxNumberBox: dxCustomCalc" class="dx-numberbox is-valid-nok is-valid-onlyok">

执行两个函数后，我想达到的结果是:

<div data-bind="dxNumberBox: dxCustomCalc" class="dx-numberbox is-valid-onlyok">

Answer 1

我会使用class绑定来设置一个基于可观察对象的CSS类。

你可以直接使用

<div data-bind="dxNumberBox: dxCustomCalc, class: dxCustomCalc.cssClass">

或者您可以使用ko.applyBindingsToNode():

将class绑定作为dxCustomCalc

自定义绑定的一部分应用。

ko.bindingHandlers.dxNumberBox = {
init: function(elem, valueAccessor, allBindings, viewModel) {
const value = ko.unwrap(valueAccessor());
ko.applyBindingsToNode(elem, {class: value.cssClass}, viewModel);
}
};
function DxNumberBox() {
this.dxCustomCalc = {
cssClass: ko.observable("is-required-empty")
};
this.setRed = () => this.dxCustomCalc.cssClass("is-valid-nok");
this.setWhite = () => this.dxCustomCalc.cssClass("is-valid-onlyok");
this.setEmpty = () => this.dxCustomCalc.cssClass("is-required-empty");
}
const vm = new DxNumberBox();
ko.applyBindings(vm);

.is-valid-nok {
background-color: red;
}
.is-valid-onlyok {
background-color: white;
}
.is-required-empty {
border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
<button data-bind="click: setRed">Red</button>
<button data-bind="click: setWhite">White</button>
<button data-bind="click: setEmpty">Empty</button>
<div data-bind="dxNumberBox: dxCustomCalc">
Profit Information
</div>
<hr>
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

函数根据字段中的值执行。

拥有像.setRed()这样的额外方法是笨拙和不必要的。将cssClass转换为一个计算的可观察对象，根据视图模型的状态计算类名，例如

cssClass: ko.pureComputed(() => {
var value = self.value().trim();
if (value == '') return 'is-required-empty';
if (value < 0) return 'is-valid-nok';
return 'is-valid-onlyok';
});