jQuery UI 日期选择器更改事件未被 KnockoutJS 捕获 [英] jQuery UI datepicker change event not caught by KnockoutJS
问题描述
我正在尝试将 KnockoutJS 与 jQuery UI 结合使用.我有一个带有日期选择器的输入元素.我目前正在运行 knockout.debug.1.2.1.js
并且似乎更改事件从未被 Knockout 捕获.该元素如下所示:
我什至尝试过更改 valueUpdate
事件类型,但无济于事.似乎 Chrome 会在更改值之前引发 focus
事件,但 IE 不会.
是否有某种重新绑定所有绑定"的 Knockout 方法?从技术上讲,我只需要在将值发送回服务器之前更改该值.所以我可以接受这种解决方法.
我认为问题是日期选择器的错,但我不知道如何解决这个问题.
有什么想法吗?
我认为对于 jQuery UI datepicker,最好使用自定义绑定,该绑定将使用 datepicker 提供的 API 读取/写入 Date 对象.
绑定可能看起来像(来自我的回答这里):
ko.bindingHandlers.datepicker = {初始化:函数(元素,valueAccessor,allBindingsAccessor){//使用一些可选选项初始化日期选择器var options = allBindingsAccessor().datepickerOptions ||{},$el = $(元素);$el.datepicker(选项);//通过注册datepicker的changeDate事件来处理字段的变化ko.utils.registerEventHandler(element, "changeDate", function () {var observable = valueAccessor();observable($el.datepicker("getDate"));});//handle 处理(如果 KO 被模板绑定移除)ko.utils.domNodeDisposal.addDisposeCallback(元素,函数(){$el.datepicker("销毁");});},更新:函数(元素,valueAccessor){var value = ko.utils.unwrapObservable(valueAccessor()),$el = $(元素);//处理来自微软的json数据if (String(value).indexOf('/Date(') == 0) {value = new Date(parseInt(value.replace(//Date((.*?))//gi, "$1")));}var current = $el.datepicker("getDate");如果(值 - 当前!== 0){$el.datepicker("setDate", value);}}};
你会像这样使用它:
<input data-bind="datepicker: myDate, datepickerOptions: { minDate: new Date() }"/>
jsFiddle 中的示例:http://jsfiddle.net/rniemeyer/NAgNV/>
I'm trying to use KnockoutJS with jQuery UI. I have an input element with a datepicker attached. I'm currently running knockout.debug.1.2.1.js
and it seems that the change event is never being caught by Knockout. The element looks like this:
<input type="text" class="date" data-bind="value: RedemptionExpiration"/>
I've even tried changing the valueUpdate
event type but to no avail. It seems like Chrome causes a focus
event just before it changes the value, but IE doesn't.
Is there some Knockout method that "rebinds all the bindings"? I technically only need the value changed before I send it back to the server. So I could live with that kind of workaround.
I think the problem's the datepicker's fault, but I can't figure out how to fix this.
Any ideas?
I think that for the jQuery UI datepicker it is preferable to use a custom binding that will read/write with Date objects using the APIs provided by the datepicker.
The binding might look like (from my answer 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);
}
}
};
You would use it like:
<input data-bind="datepicker: myDate, datepickerOptions: { minDate: new Date() }" />
Sample in jsFiddle here: http://jsfiddle.net/rniemeyer/NAgNV/
这篇关于jQuery UI 日期选择器更改事件未被 KnockoutJS 捕获的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!