無法使用jQuery觸發淘汰賽數據綁定

Question

我正在使用jQuery和淘汰賽編寫插件。 我有兩個單選按鈕。 我正在使用敲除數據綁定來檢查和取消選中單選按鈕。 問題是，當我嘗試使用jQuery單擊另一個按鈕時取消選中單選按鈕時，它沒有更新bind observable屬性。

<input  type="radio" data-bind="checked: selectedVal" name="1" value="fixedPrice"/>  Fixed Price
 <input class="hn" type="radio" data-bind="checked: selectedVal" name="1" value="allowBiding"/> Allow Biding
<pre data-bind="text:ko.toJSON($data,null,2)"></pre>
<input type="button" id="button" value="Click Me" />

 var onClick = function() {
   $('.hn').prop('checked', true);

};

$('#button').click(onClick);

var ViewModel = function () {
    var self = this;
    self.selectedVal = ko.observable("fixedPrice");
    self.selectedVal.subscribe(function (val) {
       console.log(val)
    });
};

ko.applyBindings(new ViewModel());

請在下面找到此jsfiddle並提供更多詳細信息。

Answer 1

哭！ 不要以這種方式混合KO和jQuery。 您在打擊淘汰賽，而不是使用它。 請參閱我針對更相似情況和擴展說明編寫的先前答案 。

請注意，這當然不是錯誤，jQuery默認不會觸發類似DOM更改的事件。 如果您堅持以這種方式混合使用KO和jQuery，請確保像這樣通知其他人：

 ko.applyBindings({ isChecked: ko.observable(false), onClick: function() { $('.hn').prop('checked', true); $('.hn').trigger('click'); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 1. The radio button: <input type="radio" class="hn" data-bind="checked: isChecked"> <br> 2. Trigger it with jQuery: <button data-bind="click: onClick">trigger</button> <hr> Debug info:<br><textarea data-bind="text: ko.toJSON($root)"></textarea> 

Answer 2

jQuery和Knockout爭奪視圖控制權。 如果要使用視圖模型，請使用視圖模型，除非通過視圖模型，否則不要操縱DOM。 您有一個控制單選按鈕的viewmodel元素，只需對其進行設置。 Knockout提供了一個click綁定，因此您也不需要jQuery來附加它。

 var ViewModel = function () { var self = this; self.selectedVal = ko.observable("fixedPrice"); self.selectedVal.subscribe(function (val) { console.log(val) }); self.setSelected = function () { self.selectedVal('allowBiding'); }; }; ko.applyBindings(new ViewModel()); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <input type="radio" data-bind="checked: selectedVal" name="1" value="fixedPrice" />Fixed Price <input type="radio" data-bind="checked: selectedVal" name="1" value="allowBiding" />Allow Biding <pre data-bind="text:ko.toJSON($data,null,2)"></pre> <input type="button" value="Click Me" data-bind="click:setSelected" /> 

Answer 3

看起來像個錯誤。 但是，您可以嘗試調用本機單擊處理程序，以便可觀察項將被更新。

$('.hn').triggerHandler('click');

要么

$('.hn')[0].click();

這是一個JsFiddle演示