敲除JS-将CSS类绑定到元素

Question

我想实现动态类别的划船，该划线应根据变量分配和重新分配正确的类，该类别放在该字段中。我得到的问题，当我诱导函数setred（），然后setwhite（）时，两个颜色类都是串出的，当然也考虑了第一css类。

我有一个绑定看起来像这样的元素：

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

到目前为止，我制作了elementAttr class 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(),
    }
};

and tough element：tough 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")
}

函数是基于值，场地。例如，如果值匹配，则触发了函数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

我将使用类绑定来设置基于可观察的CSS类。

您可以直接使用它

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

，也可以使用dxcustomcalc自定义绑定，使用ko.applybindingstonode（）：：

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变成可观察到的可观察到的可观察到的，该观察值基于ViewModel的状态计算类名称，例如

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';
});