1、问题描述

近期做了一个json数据比对diff的功能，前端框架使用的是knockout.js，在做单栏显示和双栏显示时，遇到了radio无法选中的问题。

2、原因分析

原来的代码：

<label class="radio-inline">
    <input type="radio" name="viewType" value="0" data-bind="checked: viewType, click: changeLayout"> 双栏显示
</label>
<label class="radio-inline">
    <input type="radio" name="viewType" value="1" data-bind="checked: viewType, click: changeLayout"> 单栏显示
</label>

function changeLayout() {
    $('#diffoutput').empty();
    var modalData = ko.mapping.toJS(this.model);
    diffUsingJS(modalData.valueFrom, modalData.valueTo, modalData.viewType);
}

上述代码中虽然在单选框上绑定了ko的click事件，但是不起作用。有两种解决方法：

  • 在changeLayout方法体最后加上return true;
  • 废弃changeLayout方法，改用另一种思路：使用ko框架监听数据的变化。（这也是正确的思路）

3、解决方法

修改后的代码（使用思路2）：

<label class="radio-inline">
    <input type="radio" name="viewType" value="0" data-bind="checked: viewType"> 双栏显示
</label>
<label class="radio-inline">
    <input type="radio" name="viewType" value="1" data-bind="checked: viewType"> 单栏显示
</label>

this.model.viewType.subscribe(function(){
    $('#diffoutput').empty();
    var modalData = ko.mapping.toJS(this.model);
    diffUsingJS(modalData.valueFrom, modalData.valueTo, modalData.viewType);
});

3、实现效果图

参考资料