Knockout JS: Thay đổi sự kiện không kích hoạt ngày HTML5 trên iPad

Question

Tôi đang sử dụng thư viện JS Knockout để liên kết các điều khiển đầu vào HTML5 trong ứng dụng web của tôi được dự định chạy trên iPad (iOS5, Safari 5.1). Các ràng buộc hoạt động tốt cho các loại đầu vào như văn bản và chọn nhưng không cho ngày. Sau khi chọn giá trị ngày thông qua datepicker giá trị không bị ràng buộc với thuộc tính viewModel (có hiệu lực không được lưu).

Đây là giao diện HTML của tôi.

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

Tôi đã cố gắng làm việc với một ràng buộc tùy chỉnh nơi tôi khởi tạo trình xử lý sự kiện thay đổi.

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

Thay đổi mã HTML sang -

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

Kỳ lạ thay, ngay cả trường hợp không được bắn. Xin lưu ý rằng trong cả hai trường hợp, sự ràng buộc xảy ra hoàn hảo trong Windows XP trên các trình duyệt Opera và Safari.

Cuối cùng, tôi đã nhận được giải pháp cho vấn đề của mình bằng cách sử dụng sự kiện 'làm mờ' thay vì 'thay đổi' trong liên kết tùy chỉnh. Bây giờ trình xử lý sự kiện đang được gọi và tôi đặt giá trị theo cách thủ công từ điều khiển ngày.

Bây giờ câu hỏi của tôi là, điều gì đó mà tôi không làm đúng và nếu không thì tại sao sự kiện thay đổi của điều khiển ngày HTML5 không kích hoạt, cho dù theo mặc định hoặc thông qua ràng buộc tùy chỉnh? Tôi muốn kiểm soát ngày để làm việc như nó được cho là.

Answer 1

Bạn không làm gì sai từ góc nhìn Knockout. Những sự kiện đó thực sự chỉ không bị sa thải (mà không có Knockout ngay cả trong hình) từ những gì tôi có thể nói bằng cách kiểm tra và bằng cách nghiên cứu nó một chút.

Bạn có thể tránh một phong tục ràng buộc bằng cách thực hiện:

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

Answer 2

Tôi có vấn đề tương tự, nhưng trong trường hợp của tôi, ngay cả những sự kiện mờ là thực sự không bị sa thải. Vì vậy, tôi đã sử dụng sự kiện đầu vào với thuộc tính valueUpdate và giải quyết sự cố.