Knockout.js Bindinghandlers Bootstrap.DatePicker答案

【问题标题】：Knockout.js Bindinghandlers Bootstrap.DatePickerKnockout.js Bindinghandlers Bootstrap.DatePicker
【发布时间】：2013-09-12 05:53:08
【问题描述】：

我正在使用带有淘汰赛的 Twitter Bootstrap.DatePicker。我遇到的问题是我无法让它正常工作。当有初始日期时它工作正常，但是当没有初始日期时，我收到以下错误：Uncaught TypeError: Cannot call method 'getTime' of undefined

HTML

<div id='target'>
    <input data-bind='datepicker: test_date'/>

    <div data-bind="text: test_date"></div>

    <input data-bind='datepicker: test_date_empty'/>
</div>

BindingHandler

ko.bindingHandlers.datepicker = {
    init: function(element, valueAccessor, allBindingsAccessor) {
      //initialize datepicker with some optional options
      var options = allBindingsAccessor().datepickerOptions || {};
      $(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());

            if (!widget.date) {
                return;
            }                

            if (_.isString(widget.date)) {
                widget.date = new Date(widget.date);
            }

            widget.setValue();
        }
    }
};

var model = {
    test_date: ko.observable(),
    test_date_empty: ko.observable()
};


ko.applyBindings(model, $("#target")[0]);

model.test_date("2012/04/04")
model.test_date_empty()

我创建了一个 JSFiddle 来演示行为 http://jsfiddle.net/DirkMolman/ACKyp/5/

我正在使用淘汰赛 2.3.0 和 Bootstrap.datepicker 1.1.3.1

希望有人能帮我解决这个问题。

【问题讨论】：

标签： twitter-bootstrap knockout.js datepicker bindinghandlers

【解决方案1】：

我之前对 Bootstrap DatePicker 没有太多经验，但看起来您可以使用 setDate API，如果值为空，则在具有空值的元素上强制执行 change 事件。根据您当前的代码，在您的 update 中，它看起来像：

    if (widget) {
        value = ko.utils.unwrapObservable(valueAccessor());

        if (!value) { 
           $(element).val("").change();
           return;
        }

        widget.setDate(_.isString(value) ? new Date(value) : value);
    }

http://jsfiddle.net/rniemeyer/JRCsb/

【讨论】：