击倒 JS Add/Remove class

Question

我正在使用 Knockout 生成动态表单：

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>

输出：

我正在尝试删除 class fa-circle-o 并在选中任何按钮时添加 class fa-check-circle-o。

预期输出：

Answer 1

checked 对 <input> 的绑定本质上说：

When this option is checked, store $data.name in the $parent.Default observable

这意味着在您的标签中，您可以通过以下操作找出标签是否属于已检查的输入：

$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>

击倒 JS Add/Remove class

Knockout JS Add/Remove class

javascript

css

knockout.js