Loại bỏ với nhiều giá trịCập nhật

Question

Tôi là người mới khi nói đến việc sử dụng loại trực tiếp, tôi thực sự muốn tối đa hóa việc sử dụng trên web mà tôi đang phát triển. Nhưng tôi lo ngại khi nói đến khả năng trình duyệt để nghe nhiều sự kiện của người dùng. Tôi tin rằng knockout thực hiện một tài sản gọi là valueupdate. Cho đến nay, tôi chỉ sử dụng 'afterkeydown' và 'blur'. Nhưng tôi cần trình duyệt của tôi để nghe nhiều sự kiện cùng một lúc. Dưới đây là các sự kiện của người dùng mà trình duyệt của tôi nên nghe:

1. Khi tải trang, tôi muốn các trường nhập của tôi bắt đầu xác thực khi tải trang.
2. Khi làm mờ, tôi muốn các trường nhập của mình xác thực sau khi bị mất tiêu điểm.
3. Sau khi khóa xuống, tôi cũng muốn các trường của mình xác nhận lại bản thân sau khi người dùng nhấn một phím.
4. Khi gửi, mặc dù các trường của tôi không được bao gồm trong biểu mẫu, tôi vẫn muốn xác thực các trường của mình, sau khi người dùng nhấp vào nút "Lưu".

Tôi đang nghĩ đến một cái gì đó như thế này:

<input data-bind="value:someObservable, valueUpdate:'blur' + 'afterKeyDown' + 'onLoad' + 'onClickOfSaveButton'" /> 

-> Một cái gì đó như thế, mặc dù tôi biết điều này sẽ gây ra một lỗi cú pháp, nhưng tôi hy vọng bạn sẽ có được quan điểm của tôi.

Tôi biết, câu hỏi này khá là khó hiểu, nhưng nếu bạn muốn biết thêm chi tiết, vui lòng chỉ định nó trong nhận xét của bạn. Tôi thực sự cần giúp đỡ ở đây. Cảm ơn.

Answer 1

tôi đã thực hiện một fiddle thể hiện như thế nào xác nhận trường giá trị trên:

• tải bằng cách gọi explictly IsValid
• khi giá trị thay đổi bởi 'valueUpdate: afterKeyDown' tham số
• ngay trước khi gửi dữ liệu bằng cách gọi explictly isValid trong phương thức gửi.

Xem:

<div> 
    <input type="text" data-bind="value: name, valueUpdate : 'afterkeydown'" /> 
    <br/> 
    <button data-bind="click: submit">Submit</button> 
</div> 

JS:

ko.validation.configure({ 
    decorateElement: true, // add 'validationElement' class on invalid element 
}); 

var VM = function() { 
    var self = this; 
    self.name = ko.observable("0").extend({ 
     minLength: 3 
    }); 
    self.isValid = function() { 
     self.name.valueHasMutated(); 
     return self.name.isValid(); 
    } 

    self.submit = function() { 
     if (self.isValid()) { 
      // server call 
     } 
    }; 
}; 

var vm = new VM(); 
ko.applyBindings(vm); 
vm.isValid(); 

See fiddle

tôi đã sử dụng knockout.validation để thực hiện kiểm tra xác nhận.

Answer 2

Luôn vui khi thấy một 'newbie' quyết định chuyển sang KnockoutJS. Bất cứ thứ gì có thể giúp giải thoát thế giới của các giải pháp ràng buộc dữ liệu, đặc biệt là một điều tuyệt vời.

Để trả lời câu hỏi của bạn về làm thế nào để key off nhiều sự kiện để cập nhật giá trị liên kết dữ liệu của bạn, bạn sẽ viết:

Trong trường hợp của tôi, tôi đã sử dụng một typeahead bootstrap để chọn giá trị, nhưng liên kết dữ liệu không được làm mới sau khi người dùng đã thực hiện lựa chọn từ hộp đề xuất thả xuống. Sau khi nhìn vào mã nguồn, tôi tìm thấy viên đá quý ẩn nhỏ này mà không được đề cập trên tài liệu KO.

Tôi cringe nói với bất cứ ai để "đi đọc nguồn", nhưng nếu bạn đang đối phó với một trường hợp rìa không được đề cập trong tài liệu, đừng sợ! tôi đã khám phá thêm nhiều tính năng không có giấy tờ làm như vậy

nguồn: https://github.com/knockout/knockout/blob/master/src/binding/defaultBindings/value.js

ko.bindingHandlers['value'] = { 
    'init': function (element, valueAccessor, allBindingsAccessor) { 
     // Always catch "change" event; possibly other events too if asked 
     var eventsToCatch = ["change"]; 
     var requestedEventsToCatch = allBindingsAccessor()["valueUpdate"]; 
     var propertyChangedFired = false; 
     if (requestedEventsToCatch) { 
      // Allow both individual event names, and arrays of event names 
      if (typeof requestedEventsToCatch == "string")  
       requestedEventsToCatch = [requestedEventsToCatch]; 
      ko.utils.arrayPushAll(eventsToCatch, requestedEventsToCatch); 
      eventsToCatch = ko.utils.arrayGetDistinctValues(eventsToCatch); 
     } 
    .... truncated .... 

Tùy thuộc vào sự quen thuộc của bạn với văn bản cam kết ràng buộc, nó có thể là khá rõ ràng rằng các valueUpdate ràng buộc xử lý một loạt các sự kiện. Ở đây, họ đang nhận được ràng buộc bổ sung "valueUpdate" và lưu trữ nó trong var requestedEventsToCatch. Nhận xét tiếp theo đánh dấu logic để xử lý một loạt các sự kiện để cập nhật giá trị trên - thực tế chúng truyền ngay cả một sự kiện như "afterKeyDown" đến ["afterKeyDown"]

Hy vọng điều này sẽ hữu ích!

Answer 3

Bạn nên kiểm tra ràng buộc textInput. Đây là cách tốt nhất để nghe chính xác tất cả các loại sự kiện có thể ảnh hưởng đến giá trị của trường nhập văn bản.

<input data-bind="textInput: userName" /> 

Không giống như các giá trị ràng buộc, textinput cung cấp thông tin cập nhật ngay lập tức từ DOM cho tất cả các loại người dùng nhập vào, bao gồm autocomplete, drag-and-drop, và các sự kiện clipboard.

http://knockoutjs.com/documentation/textinput-binding.html