无法使用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演示