2011-12-28 14 views
6

Knockout JSライブラリを使用して、WebアプリケーションのHTML5入力コントロールをiPad(iOS5、Safari 5.1)上で実行するように設定しています。バインディングは、textやselectのような入力タイプではうまく動作しますが、日付では正しく動作しません。 datepickerで日付値を選択すると、値はviewModelプロパティにバインドされません(実際には保存されません)。Knockout JS:iPadでHTML5の日付にイベントが発生しない

これは私のHTMLの外観です。

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

私は、変更イベントハンドラを初期化したカスタムバインドで対処しようとしました。でも、そのイベントが発射されていない、不思議

<input id="dob" name="dob" type="date" data-bind="datePicker: 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コードを変更します。どちらのシナリオでも、Windows XPではOperaとSafariのブラウザで完全にバインドされています。

最終的に、カスタムバインディングで「変更」の代わりに「ぼかし」イベントを使用することで、私の問題を解決しました。イベントハンドラが呼び出され、日付コントロールから値を手動で設定しています。

私の質問は、私が正しくやっていないことです、そして、そうでなければ、なぜHTML5日付コントロールの変更イベントが発生しないのですか?私はそれが想定されているように日付コントロールを動作させたい。

答えて

13

ノックアウトの観点からは何も間違ってはいません。これらの出来事は、実際には(テストでもノックアウトなしで)私がテストで知ることができないものから少しだけ調べることで解雇されることはありません。

あなたが実行してカスタムバインディングを回避することができます:私はしかし、私の場合は、同様の問題があった

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

+0

ありがとう@RP!これは魅力的に機能しました。私は、顧客がぼかしイベントをバインドすることによって何をしているのか、valueUpdateによって行われていると思います。良い学習。 –

+0

これはブラックベリーの携帯電話にも完全に機能しました。ありがとう。 – johnwards

4

、でもblurイベントが実際に発生しません。そこで、valueUpdateプロパティでinputイベントを使用し、問題を解決しました。

関連する問題