淘汰JS添加/删除类

Question

我正在使用敲除生成动态形式：

function FormField(data) {
  var self = this;
  self.Name = ko.observable(data.Name);
  self.Type = ko.observable(data.Type);
  self.Options = ko.observableArray(data.Type !== 'text' ? data.Options : []);
  self.Default = ko.observable(data.Default);
  if (self.Type() === 'Yes/No') {
    this.Default.subscribe(function(newValue) {
      console.log(newValue);
    });
  }
}

function ViewModel(data) {
  var self = this;
  self.Fields = ko.observableArray(ko.utils.arrayMap(data, function(item) {
    return new FormField(item);
  }));
  self.HiddenElements = ko.observableArray([]);
  self.Default = ko.observable();
}

ko.applyBindings(new ViewModel([{ 
  Name: "Test",
  Type: "Yes/No",
  Options: [{ name: "Yes" }, {name: "No" }],
  Default: ""
}]));

input[type=radio] {
  display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div data-bind="foreach: Fields">
    <!--ko if: $parent.HiddenElements().indexOf(Name()) == -1 -->
    <div><b type="text" data-bind="text: Name"></b>:</div>
    <!--ko if: Type() == "Yes/No"-->
    <div data-bind="foreach: Options">
    <label data-bind="css:$data.name == 'Yes' ? 'btn btn-success fa fa-circle-o' : 'btn btn-danger fa fa-circle-o'">
    <input type="radio" value="cherry" data-bind="value: $data.name ,checked: $parent.Default" />
   <span data-bind="text: $data.name"></span></label>
    </div>
   <!--/ko-->
   <!--/ko-->
</div>

输出：

我正在尝试删除类FA-Circle-O，并在检查任何按钮时添加类FA-Check-Circle-O。

预期输出：

Answer 1

检查在＆lt; input＆gt; 上绑定：

检查此选项时，存储 $ data.name 在 $ parent.default observable

中

意思是在您的标签 中存储 $ data.name 通过：

$data.name === $parent.Default()

因此，您的约束力将是：

<label 
  class="btn fa"
  data-bind="css: {
    'btn-success': $data.name === 'Yes',
    'btn-danger': $data.name !== 'Yes',
    'fa-check-circle-o': $data.name === $parent.Default(),
    'fa-circle-o': $data.name !== $parent.Default()
  }">...</label>