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

Question

我将 Bootstrap 日期选择器与以下自定义 KnockoutJS 绑定(bind)一起使用，直到现在它对我来说工作正常:

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

};

现在，在日期选择器初始化发生后，我得到了 startDate 和 endDate 值。我在这里设置了一个示例:

http://jsfiddle.net/6WR5r/

日期选择器已使用正确的日期进行初始化，但是当我点击“更改日期”按钮时，日期选择器未更新，即使触发了自定义绑定(bind)上的 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);
}

但我正在寻找更好的方法。有没有一种方法可以使用 update 函数用新值更新日期选择器，而无需指定要更新的选项？

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

Demo