html - knockout JS : Change event not firing for HTML5 date on iPad

Question

我正在使用 Knockout JS 库在我的 Web 应用程序中绑定(bind) HTML5 输入控件，该应用程序旨在在 iPad(iOS5、Safari 5.1)上运行。绑定(bind)适用于文本和选择等输入类型，但不适用于日期。通过日期选择器选择日期值后，该值未绑定(bind)到 viewModel 属性(实际上未保存)。

这是我的 HTML 的样子。

<input id="dob" name="dob" type="date" data-bind="value: dob" />

我尝试使用自定义绑定(bind)来解决这个问题，我在其中初始化了一个更改事件处理程序。

ko.bindingHandlers.datePicker = {
    init: function (element, valueAccessor) {
        ko.utils.registerEventHandler(element, "change", function () {
            var observable = valueAccessor();
            observable($(element).val());
        });
    },
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).val(value);
    }
};

将 HTML 代码更改为 -

<input id="dob" name="dob" type="date" data-bind="datePicker: dob" />

奇怪的是，即使那个事件也没有触发。请注意，在这两种情况下，绑定(bind)在 Opera 和 Safari 浏览器上的 Windows XP 中完美发生。

最终，我通过在自定义绑定(bind)中使用“blur”事件而不是“change”来解决我的问题。现在正在调用事件处理程序，我正在手动设置日期控件的值。

现在我的问题是，这是我做的不正确吗？如果没有，那么为什么 HTML5 日期控件的更改事件没有触发，无论是默认情况下还是通过自定义绑定(bind)？我希望日期控件按预期工作。

Answer 1

从 Knockout 的角度来看，您没有做错任何事。从我通过测试和稍微研究一下可以看出，这些事件实际上并没有被触发(甚至在图片中也没有 Knockout)。

您可以通过以下方式避免自定义绑定(bind):

<input type="date" data-bind="value: myDate, valueUpdate: 'blur'" />