Knockout.js自定義引導程序datepicker綁定加值綁定

Question

我需要將一個bootstrap datepicker附加到兩個輸入字段，這兩個輸入字段也需要一個值綁定，因為我需要能夠根據我的observable的變化動態設置輸入的值。

到目前為止，綁定只有一種方式：當我在datepicker中選擇一個日期時，observable正確更新。 但是當我在viewmodel中更改附加的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);
    }
};

在我的viewmodel中，我有一個封裝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()庫（在noConflict() ）： https ： //github.com/eternicode/bootstrap-datepicker

DOCS： http ： //bootstrap-datepicker.readthedocs.org/en/stable/

我需要添加/更改/做什么以獲得所需的結果？

Answer 1

我相信你想改變這一行：

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

至：

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

這是從bootstrap datepicker 文檔中獲取的 。

下面的代碼段演示了這一點。

 $.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);
    }
};

viewmodel中日期的可觀察量：

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" />