Knockout JS: изменение события не срабатывает для даты HTML5 на iPad
Я использую библиотеку Knockout JS для привязки элементов управления HTML5 input в моем веб-приложении, которое предназначено для работы на iPad (iOS5, Safari 5.1). Привязка прекрасно работает для входных типов, таких как text и select, но не для даты. После выбора значения даты через datepicker значение не привязывается к свойству viewModel (фактически не сохраняется).
Вот как выглядит мой HTML.
<input id="dob" name="dob" type="date" data-bind="value: dob" />
Я попытался обойти пользовательскую привязку, в которой я инициализировал a изменить обработчик событий.
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" />
Как ни странно, даже это событие не является стрельбой. Обратите внимание, что в обоих сценариях привязка происходит идеально в Windows XP на браузерах Opera и Safari.
В конечном счете, я получил решение своей проблемы, используя событие "размытие" вместо "изменение" в пользовательской привязке. Теперь вызывается обработчик событий,и я вручную устанавливаю значение из элемента управления date.
Теперь мой вопрос:, это что-то, что я делаю неправильно, и если нет, то почему событие изменения элемента управления датой HTML5 не срабатывает, будь то по умолчанию или через пользовательскую привязку? Я хочу, чтобы контроль дат работал так, как он должен работать.
2 ответов:
Вы не делаете ничего плохого с точки зрения нокаута. Эти события на самом деле просто не выстрелили (без нокаута даже на картинке) из того, что я могу сказать, Протестировав и немного исследовав его.
Вы можете избежать пользовательской привязки, выполнив следующие действия:
<input type="date" data-bind="value: myDate, valueUpdate: 'blur'" />
У меня была похожая проблема, но в моем случае даже событие blur фактически не срабатывает. Поэтому я использовал событие ввода со свойством valueUpdate и решил проблему.
Comments