jquery-ui - knockoutjs 数据绑定(bind)与 jquery-ui datepicker

Question

我正在使用 jQuery UI日期选择器。它后面的 HTML 输入字段当前连接到 KnockoutJS作为 dependentObservable，但是当在 View 模型中设置其值时，日期选择器会丢失其格式。

我应该如何做才能不丢失格式？我希望 viewModel 不知道它是 jQuery日期选择器。

Answer 1

您可以编写一个自定义绑定(bind)，使用日期选择器 API 在字段中设置日期，并通过正确读取日期来设置可观察值的值。

自定义绑定(bind)可能如下所示:

ko.bindingHandlers.datepicker = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        var options = allBindingsAccessor().datepickerOptions || {},
            $el = $(element);

        //initialize datepicker with some optional options
        $el.datepicker(options);

        //handle the field changing
        ko.utils.registerEventHandler(element, "change", 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),
            current = $el.datepicker("getDate");

        if (value - current !== 0) {
            $el.datepicker("setDate", value);   
        }
    }
};

你会这样使用它:

<input data-bind="datepicker: myDate, datepickerOptions: { minDate: new Date() }" />

datepickeroptions 是可选的，可以包含您想要传递到 datepicker() 调用中的任何内容。

此外，这假设您正在使用可观察的日期。如果您想与不可观察的对象进行单向绑定(bind)，则绑定(bind)必须做更多的工作，但这不太可能。

示例:http://jsfiddle.net/rniemeyer/NAgNV/