Sự cố với mẫu thông báo tùy chỉnh loại bỏ thông báo

Question

Tôi đã không sử dụng Xác thực Knockout và tôi đang cố gắng để có được một cảm giác về những gì có thể được thực hiện với nó.

Tôi đang cố gắng tìm hiểu xem có thể hiển thị biểu tượng thay vì thông báo lỗi ở bên phải thẻ đầu vào khi có lỗi hay không. Và, nếu người dùng di chuột qua biểu tượng, thông báo lỗi sẽ hiển thị.

Có ai đã làm điều này hoặc có ý tưởng về cách thực hiện việc này không?

Cảm ơn.

EDIT: (ví dụ chi tiết hơn về những gì tôi đang cố gắng để làm)

Nói rằng tôi có những điều sau đây trong mô hình quan điểm của tôi:

var firstName = ko.observable().extend({required: true}); 

HTML của tôi:

<input data-bind="value: firstName" /> 

Sự hiểu biết của tôi là nếu hộp văn bản tên đầu tiên được để trống, thì (theo mặc định) một số văn bản sẽ được hiển thị ở bên phải của hộp văn bản cho biết rằng trường này là bắt buộc.

Những gì tôi đang cố gắng để hiểu là làm thế nào để thay đổi hành vi mặc định hiển thị lỗi văn bản ở bên phải để hiển thị một biểu tượng trên bên phải mà, khi được quét qua, sẽ bật lên thông báo lỗi.

Vì vậy, một sự khởi đầu sẽ là một cái gì đó như:

<div data-bind="validationOptions: {messageTemplate: 'myCustomTemplate'}">  
    <input data-bind="value: firstName" /> 
    <input data-bind="value: lastName" /> //also required 
</div> 
<div id='myCustomTemplate'> 
    //This icon should only display when there is an error 
    <span class="ui-icon ui-icon-alert" style="display: inline-block"/> 

    //css/javascript would display this when user hovers over the above icon 
    <span data-bind="validationMessage: field" /> 
</div> 

tôi không có đầu mối nếu tôi đang sử dụng tính năng messageTemplate một cách chính xác. Tôi cũng sẽ không biết những gì để ràng buộc các văn bản trong customTemplate để hiển thị thông báo lỗi chính xác cho mỗi lỗi. IOW, firstname và lastname có thể có thông báo lỗi tùy chỉnh. Nếu cả hai đều sử dụng cùng một mẫu, mẫu sẽ chứa thông báo lỗi tùy chỉnh như thế nào?

Tôi hy vọng điều đó có ý nghĩa.

Answer 1

Có thể hiển thị biểu tượng và hiển thị thông báo lỗi khi di chuột.

Trong một dự án, chúng tôi đang thực hiện một việc tương tự. Chúng tôi hiển thị huy hiệu có số lỗi nhưng chúng tôi sử dụng decorateErang để làm nổi bật các trường và lỗiAsTitleOnModified để hiển thị lỗi khi di chuột qua đầu vào.

Để tạo thông báo lỗiTemplate bạn nên bọc mẫu của mình trong thẻ tập lệnh. Nó hoạt động như các mẫu của ko template binding.

Bên trong mẫu, bạn có thể truy cập vào được xác thực có thể quan sát được bằng cách tham chiếu đến 'trường'. Thông báo lỗi được lưu trữ trong 'lỗi' thuộc tính của bạn có thể quan sát được.

<script type="text/html" id="myCustomTemplate"> 
    <span data-bind="if: field.isModified() && !field.isValid(), 
        attr: { title: field.error }">X</span> 
</script> 

tôi đã tạo ra một fiddle để hiển thị này trong hành động: http://jsfiddle.net/nuDJ3/180/