javascript - 无法使用 jQuery 触发 Knockout 数据绑定(bind)

Question

我正在使用 jQuery 和 knockout 编写一个插件。我有两个单选按钮。我正在使用 knockout 数据绑定(bind)来选中和取消选中单选按钮。问题是，当我尝试使用 jQuery 在单击另一个按钮时取消选中单选按钮时，它不会更新 bind observable property 。

<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

jQuery 和 Knockout 正在争夺 View 的控制权。如果您要使用 View 模型，请使用 View 模型并且不要通过 View 模型操作 DOM。你有一个控制单选按钮的 viewmodel 元素，你只需要设置它。 Knockout 提供了一个 click 绑定(bind)，因此您也不需要 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" />