无法使用jQuery触发Knockout数据绑定
Not able to trigger Knockout data-bind using jQuery
我正在使用jQuery和knockout编写一个插件。我有两个单选按钮。我使用击倒数据绑定来检查和取消选中单选按钮。问题是,当我试图取消单选按钮点击另一个按钮使用jQuery,它不是更新绑定可观察属性。
<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());
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" />
哎呀!不要以这种方式混合KO和jQuery。你是在与格斗,而不是在使用它。请看我之前写的关于一个非常相似的情况和扩展解释的回答。
请注意,这当然不是一个bug, 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>
看起来像个bug。不过,你可以尝试调用本地的click处理程序,这样可观察对象就会被更新。
$('.hn').triggerHandler('click');
或
$('.hn')[0].click();
这是一个JsFiddle Demo
相关文章:
- 如何在未直接触发的情况下停止事件
- Jquery:未触发select事件
- ASP.NET通过单击JavaScript按钮触发c#事件
- Jquery隐藏未触发
- JSONP请求返回结果,但也触发error_callback
- 使用特定键在keydown时触发事件
- 未能从后端触发javascript
- 从我的控制器返回一个不同于200的代码以触发ajax错误,这被认为是一种好的做法吗
- 无法获取属性'Id'使用Knockout.js的未定义或空引用API
- 为什么我的点击事件没有使用 react js 触发
- 对于Knockout,TAB不会触发更改事件
- 为什么不是't使用按钮栏时,PageDown编辑器触发Knockout值更新
- 正在触发Knockout JS中子属性的订阅事件
- Knockout VIewModel触发foreach内部的函数
- Enter需要按两次才能触发,KnockoutJS带有knockout.validation.js
- Durandal JS在页面加载时触发的Knockout Validation与messagesOnModified值无
- 无法使用jQuery触发Knockout数据绑定
- Knockout.js |可观察数组只在最后一个元素改变时触发
- Knockout JS-如何检测触发模糊的元素
- 单击输入[复选框]'s标签将触发两次父's click事件(knockout)