未被KnockoutJS捕获的jQuery UI日期选择器更改事件
我试图用jQuery UI使用KnockoutJS。 我有一个附带日期选择器的输入元素。 我目前正在运行knockout.debug.1.2.1.js ，看起来改变事件从未被Knockout捕获。 元素看起来像这样：
<input type="text" class="date" data-bind="value: RedemptionExpiration"/>
我甚至尝试更改valueUpdate事件类型，但无济于事。 Chrome似乎在它改变值之前引发focus事件，但IE没有。
是否有一些Knockout方法“重新绑定所有绑定”？ 我在技术上只需要在将其发回服务器之前更改的值。 所以我可以接受这种解决方法。
我认为问题是日期选择器的错，但我无法弄清楚如何解决这个问题。
有任何想法吗？
我认为对于jQuery UI日期选择器，最好使用自定义绑定，它将使用datepicker提供的API使用Date对象读/写。
绑定可能看起来像（从我的答案这里）：
ko.bindingHandlers.datepicker = {
init: function(element, valueAccessor, allBindingsAccessor) {
//initialize datepicker with some optional options
var options = allBindingsAccessor().datepickerOptions || {},
$el = $(element);
$el.datepicker(options);
//handle the field changing by registering datepicker's changeDate event
ko.utils.registerEventHandler(element, "changeDate", function () {
var observable = valueAccessor();
observable($el.datepicker("getDate"));
});
//handle disposal (if KO removes by the template binding)
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$el.datepicker("destroy");
});
},
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor()),
$el = $(element);
//handle date data coming via json from Microsoft
if (String(value).indexOf('/Date(') == 0) {
value = new Date(parseInt(value.replace(//Date((.*?))//gi, "$1")));
}
var current = $el.datepicker("getDate");
if (value - current !== 0) {
$el.datepicker("setDate", value);
}
}
};
你会像这样使用它：
<input data-bind="datepicker: myDate, datepickerOptions: { minDate: new Date() }" />
在jsFiddle中示例：http://jsfiddle.net/rniemeyer/NAgNV/
这里有一个RP Niemeyer的答案版本，可以与这里找到的基因敲除验证脚本一起工作：http://github.com/ericmbarnard/Knockout-Validation
ko.bindingHandlers.datepicker = {
init: function (element, valueAccessor, allBindingsAccessor) {
//initialize datepicker with some optional options
var options = allBindingsAccessor().datepickerOptions || {};
$(element).datepicker(options);
//handle the field changing
ko.utils.registerEventHandler(element, "change", function () {
var observable = valueAccessor();
observable($(element).val());
if (observable.isValid()) {
observable($(element).datepicker("getDate"));
$(element).blur();
}
});
//handle disposal (if KO removes by the template binding)
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).datepicker("destroy");
});
ko.bindingHandlers.validationCore.init(element, valueAccessor, allBindingsAccessor);
},
update: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
//handle date data coming via json from Microsoft
if (String(value).indexOf('/Date(') == 0) {
value = new Date(parseInt(value.replace(//Date((.*?))//gi, "$1")));
}
current = $(element).datepicker("getDate");
if (value - current !== 0) {
$(element).datepicker("setDate", value);
}
}
};
更改是为了将事件处理函数传递给验证脚本，而不是将日期传递给验证脚本，然后仅在观察值有效时才将日期设置为观察值。 我还添加了这里讨论的自定义绑定所需的validationCore.init：
http://github.com/ericmbarnard/Knockout-Validation/issues/69
我还添加了rpenrose的建议，以消除一些烦人的日期选择器场景阻碍变化的变化。
我使用了不同的方法。 由于knockout.js似乎没有改变事件，所以我强制datepicker在关闭之后调用change（）来输入它的输入。
$(".date").datepicker({
onClose: function() {
$(this).change(); // Forces re-validation
}
});
上一篇: jQuery UI datepicker change event not caught by KnockoutJS