Bootstrap DateTimePicker + KnockoutJS 自定义绑定：无法清除字段答案

【问题标题】：Bootstrap DateTimePicker + KnockoutJS custom binding: Can't clear fieldBootstrap DateTimePicker + KnockoutJS 自定义绑定：无法清除字段
【发布时间】：2014-05-05 06:53:39
【问题描述】：

我创建了一个自定义的 KnockoutJS 绑定以用于Bootstrap DateTimePicker。这是一个 JSFiddle 来说明我的意思：

http://jsfiddle.net/dXGB3/7/

效果很好，除了一个非常重要的细节：假设在选择日期后，用户从相应的文本框中删除了日期。 “更新”方法不会触发，支持字段仍包含先前选择的日期。然而，用户的期望是他们正在提交一个没有日期的表单，但这个期望没有得到满足。 要查看问题：在小提琴中，单击以查看日期时间选择器。选择一个日期。然后，将文本从文本框中擦除。日期仍然显示在 span 中。

我开始制定解决方案，但它也有问题，我不确定我是否会以最好的方式解决这个问题。我的解决方案：

潜在的解决方案小提琴：http://jsfiddle.net/NGwGb/1/

包装我的自定义绑定以包含值绑定。好消息：当用户擦除文本时，现在调用“值”。但是，我只想在用户擦除字段中的文本的一种情况下覆盖（擦除）支持日期对象值。所以我在更新方法中添加了这段代码：

    if ($(element).find("input").val() == "")
        valueAccessor()(null);
    else {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).data("DateTimePicker").setValue(value);
    }

我认为从 DOM 中的元素中提取值真的很难看（违背了数据绑定的目的），而且这段代码破坏了最初从后端的日期对象填充表单的场景。

我很乐意就让用户在擦除字段中的文本时真正擦除模型中日期字段的内容的最佳方式提出建议。

谢谢...

-本

【问题讨论】：

标签： knockout.js datepicker datetimepicker bootstrap-datetimepicker

【解决方案1】：

Bootstrap DateTimePicker 有 error 事件。来自documentation：

当 Moment 无法解析日期或时间选择器由于 disabledDates 设置而无法更改时触发。返回一个时刻日期对象。使用 invalidAt() 可以找到具体的错误。有关更多信息，请参阅 Moment 的文档。

因此，当用户从相应的文本框中删除日期或写入错误的日期时，将调用此事件。您可以在 init 函数中添加类似这样的内容：

    $(element).datetimepicker(options).on("dp.error", function (ev) {
        var observable = valueAccessor();
        console.log(ev.date.toString()); // only for debug.
        observable("");
    });

【讨论】：