Knockout.js 自定义 bootstrap 日期选择器绑定加值绑定

Question

我需要将 bootstrap 日期选择器附加到两个也需要值绑定的输入字段，因为我需要能够根据可观察对象的变化动态设置输入值。

到目前为止，绑定仅以一种方式工作：当我在日期选择器中选择一个日期时，observable 会正确更新。但是当我更改我的视图模型中附加的可观察值的值时，输入不会反映更改。

这是我的绑定处理程序：

ko.bindingHandlers.bootstrapDP = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var options = allBindingsAccessor().datepickerOptions || {};
        $(element).bootstrapDP(options).on("changeDate", function (ev) {
            var observable = valueAccessor();
            observable($(element).val());
        });
    },
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).bootstrapDP("setValue", value);
    }
};

在我的视图模型中，我有一个封装了 startDate 和 endDate 的对象：

self.dateFilter = {
    startDate: ko.observable(),
    endDate: ko.observable()
};

这是我的 HTML:

<input type="text" data-bind="bootstrapDP: dateFilter.startDate, value: dateFilter.startDate" />
<input type="text" data-bind="bootstrapDP: dateFilter.endDate, value: dateFilter.endDate" />

我正在使用这个日期选择器库（noConflict()-模式）：https://github.com/eternicode/bootstrap-datepicker

文档在这里：http://bootstrap-datepicker.readthedocs.org/en/stable/

我需要add/change/do什么不同才能得到想要的结果？

Answer 1

我相信你想改变这一行：

$(element).bootstrapDP("setValue", value);

收件人：

$(element).bootstrapDP("update", value);

这是取自 bootstrap 日期选择器 documentation。

下面的代码片段演示了这个工作原理。

$.fn.bootstrapDP = $.fn.datepicker;

ko.bindingHandlers.bootstrapDP = {
  init: function(element, valueAccessor, allBindingsAccessor) {
    var options = allBindingsAccessor().datepickerOptions || {};
    $(element).bootstrapDP(options).on("changeDate", function(ev) {
      var observable = valueAccessor();
      observable($(element).val());
    });
  },
  update: function(element, valueAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor());
    // use "update" instead of "setValue"
    $(element).bootstrapDP("update", value);
  }
};

var vm = {
  startDate: ko.observable(),
  endDate: ko.observable()
};
ko.applyBindings(vm);

setTimeout(function(){
  vm.startDate(new Date())
}, 1000);

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker3.standalone.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<input type="text" data-bind="bootstrapDP: startDate, value: startDate" />
<input type="text" data-bind="bootstrapDP: endDate, value: endDate" />

Answer 2

所以这是我最终得到的工作代码，仅适用于那些需要快速工作解决方案并且不想通过评论工作的人：

自定义绑定处理程序：

ko.bindingHandlers.bootstrapDP = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var options = allBindingsAccessor().datepickerOptions || {};
        $(element).bootstrapDP(options);
    },
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).bootstrapDP("update", value);
    }
};

视图模型中日期的可观察值：

self.dateFilter = {
    startDate: ko.observable(),
    endDate: ko.observable()
};

具有绑定的HTML：

<input type="text" data-bind="bootstrapDP: dateFilter.startDate, value: dateFilter.startDate" />
<input type="text" data-bind="bootstrapDP: dateFilter.endDate, value: dateFilter.endDate" />

Knockout.js 自定义 bootstrap 日期选择器绑定加值绑定

Knockout.js custom bootstrap datepicker binding plus value binding

custom-binding

knockout.js