Knockout JS: Zmień zdarzenie, które nie uruchamia się dla daty HTML5 na iPadzie

Question

Używam biblioteki Knockout JS do wiązania elementów sterujących wprowadzania HTML5 w mojej aplikacji sieci Web, która ma działać na iPadzie (iOS5, Safari 5.1). Wiązanie działa dobrze dla typów danych wejściowych, takich jak tekst i wybierz, ale nie dla daty. Po wybraniu wartości daty poprzez datepicker, wartość nie jest związana z właściwością viewModel (w efekcie nie jest zapisywana).

Tak właśnie wygląda mój HTML.

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

Próbowałem pracować z niestandardowym wiązaniem, w którym zainicjowałem procedurę obsługi zdarzenia zmiany.

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); 
    } 
}; 

Zmiana kodu HTML -

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

O dziwo, mimo że zdarzenie nie jest wypalania. Należy pamiętać, że w obu scenariuszach wiązanie odbywa się doskonale w systemie Windows XP w przeglądarkach Opera i Safari.

W końcu znalazłem rozwiązanie mojego problemu, używając zdarzenia "rozmycie" zamiast "zmiany" w niestandardowym powiązaniu. Teraz wywoływana jest procedura obsługi zdarzenia i ręcznie ustawiam wartość z kontrolki daty.

Moje pytanie brzmi, czy jest to coś, czego nie robię poprawnie, a jeśli nie, to dlaczego zdarzenie zmiany kontrolki daty HTML5 nie jest uruchamiane, czy domyślnie, czy poprzez niestandardowe powiązanie? Chcę, aby kontrola daty działała tak, jak powinna.

Answer 1

Nie robisz niczego złego z perspektywy Knockout. Te wydarzenia po prostu nie są wystrzeliwane (bez Knockout nawet na zdjęciu) z tego, co mogę powiedzieć, testując i badając je trochę.

Można uniknąć zwyczaj wiązania wykonując:

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

Answer 2

miałem podobny problem, ale w moim przypadku, nawet zdarzenie blur jest faktycznie nie wypalił. Użyłem więc zdarzenia wejściowego z właściwością valueUpdate i rozwiązałem problem.