jquery-ui - KnockoutJS 未捕获 jQuery UI 日期选择器更改事件

Question

我正在尝试将 KnockoutJS 与 jQuery UI 结合使用。我有一个带有日期选择器的输入元素。我当前正在运行 knockout.debug.1.2.1.js ，并且 Knockout 似乎从未捕获更改事件。该元素如下所示:

<input type="text" class="date" data-bind="value: RedemptionExpiration"/>

我什至尝试更改 valueUpdate 事件类型，但无济于事。 Chrome 似乎会在更改值之前引发 focus 事件，但 IE 不会。

是否有一些 Knockout 方法可以“重新绑定(bind)所有绑定(bind)”？从技术上讲，我只需要在将其发送回服务器之前更改该值。所以我可以接受这种解决方法。

我认为问题是日期选择器的错，但我不知道如何解决这个问题。

有什么想法吗？

Answer 1

我认为对于 jQuery UI 日期选择器，最好使用自定义绑定(bind)，该绑定(bind)将使用日期选择器提供的 API 来读取/写入 Date 对象。

绑定(bind)可能看起来像(来 self 的回答 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/