2011-12-28 59 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屬性的輸入事件,並解決了問題。