Question

我正在使用Bootstrap datepicker和以下自定义KnockoutJS绑定，这对我来说很好，直到现在：

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

    $(element).datepicker(options);

    //when a user changes the date, update the view model
    ko.utils.registerEventHandler(element, "changeDate", function(event) {
      var value = valueAccessor();
      if (ko.isObservable(value)) {
        value(event.date);
      }                
    });
  },
  update: function(element, valueAccessor)   {
    var widget = $(element).data("datepicker");
    //when the view model is updated, update the widget
    if (widget) {
      widget.date = ko.utils.unwrapObservable(valueAccessor());
      widget.setValue();            
    }
  }

};

现在，我遇到了{/ 1}}和startDate值在发生日期选择器初始化之后的情况。我在这里建立了一个例子：

http://jsfiddle.net/6WR5r/

使用正确的日期初始化datepicker，但是当我点击＆＃34;更改日期＆＃34;按钮，即使自定义绑定上的endDate函数被触发，也不会更新日期选择器。

我尝试过不同版本的update功能，但没有成功：

update

唯一有效的方法是使用update: function(element, valueAccessor, allBindingsAccessor) { var options = allBindingsAccessor().datepicker || {}; $(element).datepicker(options); } update: function(element, valueAccessor, allBindingsAccessor) { $(element).datepicker('update'); }和setStartDate方法，如下所示：

setEndDate

但我正在寻找更好的方法。有没有办法使用update: function(element, valueAccessor, allBindingsAccessor) { var options = allBindingsAccessor().datepicker || {}; $(element).datepicker('setStartDate', options.startDate); $(element).datepicker('setEndDate', options.endDate); }函数用新值更新datepicker，而不必指定要更新的选项？

Answer 1

所以在两个问题中，你让我写了两个难看的解决方案......

Apparently您需要删除插件并在想要更改startDate或endDate时重新创建插件:(

您的更新功能变为：

update: function(element, valueAccessor, allBindingsAccessor) {
    console.log("update fired");

     //when the view model is updated, update the widget
    if ($(element).data("datepicker")) {
        $(element).datepicker("remove");
        var options = allBindingsAccessor().datepicker || {};
        $(element).datepicker(options);
        $(element).data("datepicker").date = ko.utils.unwrapObservable(valueAccessor());
        $(element).data("datepicker").setValue();            
    } 
}

使用KnockoutJS初始化后更新bootstrap datepicker

1 个答案:

的 Demo