KnockoutJS-为输入类型无线电编写KO绑定句柄的正确方法

KnockoutJS - Correct Way of Writing KO BindingHandlers for Input Type Radio

本文关键字：句柄 绑定 方法 KO 输入 类型 无线电 KnockoutJS-      更新时间：2023-09-26

我为输入类型无线电设置了一个自定义绑定，如下所示：

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

Html输入类型无线电绑定到它是这样写的：

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

（您可能会注意到，我在这里使用数据类来绑定元素，这是因为我使用的是ClassBindingProvider插件）

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

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

当单击"无单选按钮"时实际上为true，而当单击"是"单选按钮时为false 但是，页面本身没有显示要选择（选中）的单选按钮

目前，我在这里使用的ko BindingHandlers只是"点击"。

我尝试添加更多的bindingHandler，它是"checked:this"，并将其放在"click:this"行的下面，但仍然不起作用。

有人能帮我确定这里的问题是什么，应该如何解决吗？

谢谢。

从你的问题中还不清楚你想要的行为是什么，但我已经整理了一个具有典型单选按钮行为的片段。最重要的变化是，我为每个单选按钮元素添加了一个value属性。没有它们，选择不同单选按钮的值就不会发生变化。

我在这里写了一个点击绑定，但注释掉了，并且使用了一个检查绑定，这通常是绑定无线电组的更好方法。我订阅绑定变量只是为了在它更改时输出信息。

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>

相关文章：