Question

我正在使用jQuery和knockout编写插件。我有两个单选按钮。我正在使用knockout data-bind检查并取消选中单选按钮。问题是，当我尝试使用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());

请在下方找到this jsfiddle，了解更多详情。

Answer 1

韦尔普！不要以这种方式混合KO和jQuery。你战斗淘汰赛，而不是使用它。有关非常类似的情况和扩展说明，请参阅this earlier answer I wrote。

请注意，这肯定是不一个错误，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正在争夺对视图的控制权。如果您要使用viewmodel，请使用viewmodel并且不要通过viewmodel操作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

它看起来像一个bug。但是，您可以尝试调用本机单击处理程序，以便更新observable。

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

或者

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

这是JsFiddle Demo

无法使用jQuery触发Knockout数据绑定

3 个答案: