Перехват нокаутом для datepicker с динамическими параметрами

Question

Я использую привязку для нокаута для jQuery date picker.

См jQuery UI datepicker change event not caught by KnockoutJS

Тот же код работает отлично, за исключением я не могу установить Datepicker параметры динамически.

Как установить датупиксером (например, максимальная дата и т. Д.) Динамически (нажмите кнопку), используя приведенную выше ссылку ссылки?

Answer 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