KnockoutJS未捕获jQuery UI日期选择器更改事件
我正在尝试使用带有jQuery UI的KnockoutJS。我有一个附加了datepicker的输入元素。我目前正在运行knockout.debug.1.2.1.js，似乎Knockout永远不会捕捉到更改事件。该元素如下所示：
<input type="text" class="date" data-bind="value: RedemptionExpiration"/>我甚至尝试过更改valueUpdate事件类型，但都无济于事。似乎Chrome在改变值之前引发了一个focus事件，但IE并非如此。
有没有什么Knockout方法可以“重新绑定所有的绑定”？从技术上讲，我只需要在将值发送回服务器之前对其进行更改。所以我可以接受这样的变通方法。
我认为问题是datepicker的问题，但我不知道如何解决这个问题。
有什么想法吗？
回答 12
Stack Overflow用户
发布于 2011-07-07 23:40:52
我认为对于jQuery UI日期选择器，最好使用自定义绑定，该绑定将使用日期选择器提供的API对日期对象进行读/写。
绑定可能类似于(来自我的答案here)：
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/
Stack Overflow用户
发布于 2012-11-08 02:51:25
这是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的建议，对更改进行模糊处理，以消除一些令人讨厌的datepicker场景。
Stack Overflow用户
发布于 2012-12-20 09:10:12
我使用了一种不同的方法。由于knockout.js似乎不会在change上触发事件，因此我强制datepicker在关闭后为其输入调用change()。
$(".date").datepicker({
onClose: function() {
$(this).change(); // Forces re-validation
}
});https://stackoverflow.com/questions/6612705
复制相似问题