javascript - 使用 KnockoutJS 初始化后更新引导日期选择器

Question

我正在使用带有以下自定义 KnockoutJS 绑定的 Bootstrap datepicker，到目前为止它对我来说效果很好：

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();            
    }
  }

};

现在，我有一种情况，在 datepicker 初始化发生后startDate我得到了和endDate值。我在这里设置了一个例子：

http://jsfiddle.net/6WR5r/

日期选择器使用正确的日期初始化，但是当我点击“更改日期”按钮时，日期选择器没有更新，即使update自定义绑定上的函数被触发。

我尝试了不同版本的update函数，但没有成功：

update: function(element, valueAccessor, allBindingsAccessor)   {
  var options = allBindingsAccessor().datepicker || {};
  $(element).datepicker(options);
}

update: function(element, valueAccessor, allBindingsAccessor)   {
  $(element).datepicker('update');
}

唯一有效的是使用setStartDateandsetEndDate方法，如下所示：

update: function(element, valueAccessor, allBindingsAccessor) {
  var options = allBindingsAccessor().datepicker || {};

  $(element).datepicker('setStartDate', options.startDate);
  $(element).datepicker('setEndDate', options.endDate);
}

但我正在寻找更好的方法。有没有办法使用该update函数用新值更新日期选择器，而不必指定要更新的选项？

Answer 1

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

显然，您需要删除插件并在要更改时重新创建它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();            
    } 
}

演示