Question

我有一个广播组，允许用户（使用jQuery事件）取消选择以前的选择。我正在尝试添加KnockoutJS来跟踪更改，但是viewmodal与UI不同步。任何人都可以建议我如何让两者同步？

我的观看代码：

<div id='test'>
    <input data-bind="checked: asd"  name='asd' type='radio' value="a"/>
    <input data-bind="checked: asd"  name='asd' type='radio' value="b"/>
    <input data-bind="checked: asd"  name='asd' type='radio' value="c"/>
</div>
<div>
     <p>Linked Value: <span data-bind="text: asd"></p>  
</div>

相应的JS：

$('#test input[type="radio"]').click(function (event) {
    var checked = $(this).hasClass('checked');
    if (checked) {
        $(this).removeAttr('checked');
        $(this).removeClass('checked');
    }
    else {
        $(this).addClass('checked');
    }
});

var viewModel = {
  asd: ko.observable("a")
};

ko.applyBindings(viewModel);

可以在this fiddle在线查看示例。

Answer 1

您无需担心已完成的已检查属性。将您的活动更改为：

$('#test input[type="radio"]').click(function (event) {

    var checked = $(this).hasClass('checked');
    if (checked) {
        $(this).removeClass('checked');
    }
    else {
        $(this).addClass('checked');
    }
});

Fork of your fiddle here

Answer 2

我认为这样做的方法很简单：

$('#test input[type="radio"]').click(function (event) {
    if ($(this).val() === viewModel.asd()) {
         viewModel.asd(null);   
    }
});

Updated Fiddle

在保持视图模型同步的同时取消选择单选按钮

2 个答案: