我为输入类型radio设置了自定义绑定,如下所示:

"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,并将其放置在“单击:此”行下方,但仍然无法正常工作。

有人可以帮我找出问题所在,如何解决?

谢谢。

最佳答案

从您的问题中尚不清楚您想要的行为到底是什么,但是我整理了一个具有典型单选按钮行为的代码段。最重要的变化是,我向每个单选按钮元素添加了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>

09-25 16:41