2011-12-28 57 views
6

我正在Knockout JS库中绑定用于在iPad(iOS5,Safari 5.1)上运行的Web应用程序中的HTML5输入控件。该绑定适用于输入类型,如文本和选择,但不适用于日期。通过日期选择器选择日期值后,该值不会绑定到viewModel属性(实际上不会保存)。Knockout JS:更改事件未在iPad上触发HTML5日期

这就是我的HTML外观。

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

我试图解决使用自定义绑定,我初始化更改事件处理程序。

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

奇怪的是,即使该事件不点火。请注意,在这两种情况下,绑定在Opera和Safari浏览器上的Windows XP中完美发生。

最终,我通过在自定义绑定中使用“模糊”事件而不是“更改”来解决我的问题。现在正在调用事件处理程序,并且我正在手动设置日期控件中的值。

现在我的问题是,是不是我做得不正确,如果不是,那么为什么HTML5日期控件的更改事件不会触发,无论是默认还是通过自定义绑定?我希望日期控件按照它应有的方式工作。

回答

13

从Knockout的角度来看,你没有做任何错误。这些事件实际上并没有从我通过测试和通过研究得出的结果中被解雇(即使在图片中也没有敲除)。

您可以通过执行避免自定义绑定:

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

+0

Thanks @RP!这工作像一个魅力。我猜想我通过blur事件的客户绑定所做的工作是由valueUpdate完成的。良好的学习。 – 2011-12-29 07:27:33

+0

这也适用于黑莓手机。谢谢。 – johnwards 2012-09-14 09:28:44

4

我有类似的问题,但对我来说,即使是模糊事件实际上没有被解雇。所以我使用了valueUpdate属性的输入事件,并解决了问题。