具有动态选项的日期选择器的淘汰赛绑定答案

【问题标题】：Knockout binding for datepicker with dynamic options具有动态选项的日期选择器的淘汰赛绑定
【发布时间】：2015-08-31 19:27:30
【问题描述】：

我正在为 jQuery 日期选择器使用敲除绑定。

参考jQuery UI datepicker change event not caught by KnockoutJS

除了我不能动态设置日期选择器选项之外，相同的代码工作正常。

如何使用上述参考链接动态设置日期选择器选项（如记住最大日期等）（单击按钮）？

【问题讨论】：

标签： knockout.js jquery-ui-datepicker

【解决方案1】：

首先，您需要将options 对象作为视图模型的一部分。然后，根据更改，将datePicker 更新为新的options。

这样，您可以将任何options（如dayNames 和dateFormat 等）添加到您的options 对象中，绑定处理程序将自动更新组件。

例如（动态改变minDate）：

var viewModel = {
    myDate: ko.observable(new Date("12/01/2013")),
    setToCurrentDate: function() {
        this.myDate(new Date());
    },
    options: {
        // make sure you're using an observable to wrap the value
        minDate: ko.observable(new Date()) 
    },
    changeMinDate: function(){
        this.options.minDate(new Date('01/01/2015'));
    }
};

在绑定处理程序中（添加对options 更改的订阅）：

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

        //initialize datepicker with some optional options
        var options = ko.mapping.toJS(opts) || {};
        $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");
        });

        // subscribe to all changes in the options object
        ko.computed(function(){
            var options = ko.mapping.toJS(opts) || {};

            for (var i in options)
                $el.datepicker('option', i, options[i]);
        });
    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            $el = $(element),
            current = $el.datepicker("getDate");

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

见Fiddle

【讨论】：

好一个+1！谢谢。