Question

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

这是我在Knockout中的datetimepicker，就像自定义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（因为我希望在显示模态时有可见的datepicker）并且我有同样的问题。当我评论LINE 5时，没有缓慢但我的日期选择器也不是可变的。

当用户点击按钮查看模态时，我可以调用datepicker的绑定吗？这样，在页面加载期间，没有初始化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绑定。我还在其中放置了一些逻辑，以使该字段与模型保持同步，直到实际初始化datepicker（计算出updater）。

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

Datetimepicker的慢

1 个答案: