javascript - KnockoutJS - 为输入类型 radio 编写 KO BindingHandler 的正确方法

Question

我为输入类型 radio 设置了自定义绑定(bind)，如下所示:

"radio-yesno": function(bindingContext, dataClasses){
    return {
        click: this,
    }
},

绑定(bind)到此的 Html 输入类型 Radio 的写法如下:

<label class="radio inline">
   <input type="radio" name="RadioTest" id="RadioYes" data-class="radio-yesno"/>
   Yes
</label>
<label class="radio inline">
   <input type="radio" name="RadioTest" id="RadioNo" data-class="radio-yesno"/>
   No
</label>

(您可能会注意到我在这里使用 data-class 来绑定(bind)元素，这是因为我使用的是 ClassBindingProvider 插件)

现在的问题是，当单击单选按钮时，包含该元素的关联可观察值的函数实际上被触发，并且在调试过程中可以看到

$('#RadioNo').is(':checked')

当单击“否”单选按钮时，

实际上为 true；当单击"is"单选按钮时，

为 false。 但是，页面本身不显示要选择(选中)的单选按钮。

目前我在这里使用的 ko BindingHandlers 仅限于“点击”。

我尝试添加更多的“checked: this”绑定(bind)处理程序并将其放在“click: this”行下方，但仍然不起作用。

有人可以帮我找出问题所在以及如何解决吗？

谢谢。

Answer 1

从您的问题中尚不清楚您想要的行为是什么，但我已经将典型的单选按钮行为的片段放在一起。最重要的更改是我向每个单选按钮元素添加了一个 value 属性。如果没有它们，选择不同的单选按钮不会改变任何值。

我已在此处编写但注释掉了单击绑定(bind)，并且正在使用选中的绑定(bind)，这通常是绑定(bind)单选组的更好方法。我订阅绑定(bind)变量只是为了在它发生变化时输出信息。

let bindings = {
  "radio-yesno": function(bindingContext, dataClasses) {
    return {
      // click: this.clickHandler,
      checked: this.checkedVariable
    }
  }
};
ko.bindingProvider.instance = new ko.classBindingProvider(bindings);
let vm = {
  clickHandler: function(data, event) {
    console.debug("Click:", data, event);
    true;
  },
  checkedVariable: ko.observable('on')
};

vm.checkedVariable.subscribe((newValue) => {
  console.debug('New value:', newValue);
});

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="//rawgit.com/rniemeyer/knockout-classBindingProvider/master/src/knockout-classBindingProvider.js"></script>
<label class="radio inline">
  <input type="radio" name="RadioTest" value="on" data-class="radio-yesno" />Yes
</label>
<label class="radio inline">
  <input type="radio" name="RadioTest" value="off" data-class="radio-yesno" />No
</label>