使用动态选项敲除datepicker的绑定

Question

我正在使用jout日期选择器的knockout绑定.

请参阅KnockoutJS未捕获的jQuery UI datepicker更改事件

相同的代码工作正常,但我无法动态设置datepicker选项.

如何使用上面的参考链接动态(按钮点击)设置datepicker选项(如同最大限度日期等)？

Answer 1

首先,您需要使options对象成为视图模型的一部分.然后,在更改时,datePicker使用新更新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);   
        }
    }
};

见小提琴