javascript - knockout 绑定(bind)到单选框

Question

我有单选框。为此，我绑定(bind)了 click 事件。 问题:万一这个单选框应该从一开始就被选中 - 它不是。

所以我想添加 checked 事件。但这会中断 click 逻辑，所以它看起来像双击。

在创建 ViewModel 时，如何在不手动调用 click 的情况下将所有事件正确绑定(bind)到 radio ？

<input data-bind="css: { checked: $component.isActiveGroup(value) },
                              click: $component.setActiveGroup.bind($component, value), 
                              checked: $component.activeGroup"
                   value={{value}}
                   type="radio" />

setActiveGroup(groupName: string) {
    if (!groupName) {
        return;
    }
    const isActive = this.isActiveGroup(groupName);
    this.activeGroup(isActive ? '' : groupName);
}

isActiveGroup(groupName: string) {
    return this.activeGroup() === groupName;
}

activeGroup = ko.observable('');

Answer 1

默认情况下，checked 绑定(bind)会完成您需要的一切:

var VM = function() {

  this.activeGroup = ko.observable("A");
  this.activeGroup.subscribe(console.log.bind(console));

  this.isActiveGroup = groupName => {
    return this.activeGroup() === groupName;
  }


  this.groups = ["A", "B", "C"];
}


ko.applyBindings(new VM());

.checked { background: yellow; }

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

<!-- ko foreach: groups -->
<label data-bind="css: { checked: $parent.isActiveGroup($data) }">
  <span data-bind="text: $data"></span>
  <input type="radio" data-bind="value: $data,
                                 checked: $parent.activeGroup" />
</label>
<!-- /ko -->

如果您正在寻找“切换”功能，您应该创建 type="checkbox" 输入或创建一个附加选项 none。单选框意味着每组有 1 个选择。

附言要设置选中输入的样式，您还可以使用 :checked css 选择器。在我的示例中，我选择设置周围 label 的样式。