KnockoutJS - 为输入类型 Radio 编写 KO BindingHandlers 的正确方法答案

【问题标题】：KnockoutJS - Correct Way of Writing KO BindingHandlers for Input Type RadioKnockoutJS - 为输入类型 Radio 编写 KO BindingHandlers 的正确方法
【发布时间】：2016-12-05 11:31:38
【问题描述】：

我已经为输入类型radio设置了一个自定义绑定，是这样的：

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

绑定到 this 的 Html Input Type 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来绑定元素，这是因为我使用了ClassBindingProvider插件）

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

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

在单击 No Radio Button 时实际上为 true，而在单击 Yes Radio Button 时为 false。 但是，页面本身没有显示要选择（选中）的单选按钮。

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

我尝试添加更多的“已检查：this”的 bindingHandler 并将其放在“click:this”行下方，但仍然无法正常工作。

有人可以帮我确定这里的问题是什么以及应该如何解决？

谢谢。

【问题讨论】：

标签： javascript html web knockout.js

【解决方案1】：

从你的问题中不清楚你想要的行为是什么，但我已经把一个带有典型单选按钮行为的 sn-p 放在一起。最重要的变化是我为每个单选按钮元素添加了一个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>

【讨论】：