取消選擇單選按鈕同時保持視圖模型同步

我有一個無線組，允許用戶（使用jQuery事件）取消選擇以前的選擇。我正在嘗試添加KnockoutJS來跟蹤更改，但視圖模式與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觀看。

來源

2011-09-14 Ian Sleigh

我認爲，一個簡單的辦法是做：

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

Updated Fiddle

來源

2011-09-14 21:57:24

@ RP這是一種享受 - 非常感謝（以及所有有用的帖子敲我）Ian –

@RP不錯，作爲一個側面說明，試圖通過data-bind =「click：...」方法來實現這個工作是一個總PITA，我無法以這種方式工作。 –

@Allen我的想法是做一個自定義綁定，檢查包裹並添加另一個事件處理程序，以便在點擊時將其歸零。就像：http://jsfiddle.net/rniemeyer/TMZsJ/。需要一些更多的工作來處理與非觀察對象的綁定，並且可以很容易地移除jQuery依賴關係。 –

您不必擔心檢查的屬性，這是爲你完成的。您的活動改成這樣：

$('#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

來源

2011-09-14 21:39:05

感謝您的反饋 - 但是變化意味着我不能再取消選擇是預期功能的radiogroup –

@Ian所以你希望他們能夠選擇選項a，b，c還是都不選擇？您希望通過允許用戶點擊2x選項來獲得該功能，第二次將其刪除？ –

是的，這個想法 - 用戶將能夠點擊一個先前選擇的值來完全刪除選擇 –

取消選擇單選按鈕同時保持視圖模型同步

回答

相關問題