日期时间选择器的缓慢

Question

我想请教您的意见。 在一页上，我有许多 jQuery UI datepicker`s。当用户单击按钮时，它们在 Bootstrap Modal 中可见。 不幸的是，这个页面加载速度很慢（尤其是在 IE8 中）。我知道 IE8 中的 datepicker 会导致运行缓慢，但有时我会收到该脚本停止工作。

这是我在 Knockout 中的日期时间选择器，就像一个自定义 bindingHandlers

ko.bindingHandlers.datetimepicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        //initialize datepicker with some optional options
        var options = allBindingsAccessor().datetimepickerOptions || {};
        $(element).datetimepicker(options);//Line 5

        //handle the field changing
        ko.utils.registerEventHandler(element, "change", function () {
            var observable = valueAccessor();
            observable($(element).datetimepicker("getDate"));
        });

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).datetimepicker("destroy");
        });

    },
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
           current = $(element).datetimepicker("getDate");
        if (value - current !== 0) {
          // LINE 23  $(element).datetimepicker("setDate", value);  
        }
    }
};

我评论第 23 行是因为之前我遇到了同样的性能问题。但后来我有了这样的选择器

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

当我评论它时，一切都很好。

现在我更改了 do（因为我希望在显示模式时有可见的日期选择器）并且我遇到了同样的问题。 当我评论第 5 行时，没有缓慢，但我的日期选择器也不可见。

当用户点击按钮查看 Modal 时，我可以调用 datepicker 的绑定吗？这样在页面加载期间不会初始化日期选择器的绑定？ 如果我把jQuery UI datepicker改成bootstrap datepicker，性能会有一些变化吗？

Answer 1

您可能会“懒惰地”初始化您的日期选择器。例如，要与现有的 datepicker 绑定一起使用，您可以创建一个 lazyDatepicker 绑定。

类似：

ko.bindingHandlers.lazyDatepicker = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        //keep the field's value in sync until the datepicker binding has been initialized
        var updater = ko.computed(function() {
            var options = ko.unwrap(allBindingsAccessor()),
                value = $.datepicker.formatDate(options.dateFormat || "mm/dd/yy", ko.unwrap(valueAccessor()));

            $(element).val(value);
        });

        //use "one" so this only fires a single time on initial focus
        $(element).one("focus", function() {
            //binding will now keep value in sync
            updater.dispose();

            //apply the actual datepicker
            ko.applyBindingAccessorsToNode(element, {
                datepicker: valueAccessor,
                datepickerOptions: function() { return allBindingsAccessor.get("datepickerOptions"); }
            })
        });
    }
};

真的，这只是在字段获得焦点时应用datepicker 绑定。我还在其中添加了一些逻辑，以使该字段与模型保持同步，直到实际初始化日期选择器（updater 计算）。

这是一个小提琴：http://jsfiddle.net/rniemeyer/GvLfV/