Problemy z szablonem niestandardowych wiadomości sprawdzania poprawności nokautów

Question

Nie używałem sprawdzania poprawności Knockout i próbuję wyczuć, co można z tym zrobić.

Próbuję dowiedzieć się, czy możliwe jest wyświetlanie ikony zamiast komunikatu o błędzie po prawej stronie znacznika wejściowego, gdy wystąpi błąd. Jeśli użytkownik znajdzie się nad ikoną, wyświetli się komunikat o błędzie.

Czy ktoś to zrobił lub ma pomysł, jak to osiągnąć?

Dzięki.

EDIT: (bardziej szczegółowy przykład tego, co próbuję zrobić)

że mam następujących w moim modelu widoku:

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

Moje HTML:

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

Rozumiem, że jeśli pole tekstowe imienia pozostało puste, to (domyślnie) na prawo od pola tekstowego pojawi się tekst z informacją, że to pole jest wymagane.

Co Próbuję zrozumieć, jak zmienić domyślne zachowanie wyświetlając błąd tekst w sprawie prawa do wyświetlania ikonę po prawej stronie, który unosił się nad kiedy będzie popup komunikat o błędzie.

Więc początek byłoby coś jak:

<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> 

nie mam pojęcia, czy jestem prawidłowo używając funkcji messageTemplate. Nie wiedziałbym również, do czego ma wiązać tekst w customTemplate, aby wyświetlać poprawny komunikat o błędzie dla każdego błędu. IOW, imię i nazwisko mogą mieć niestandardowe komunikaty o błędach. Jeśli oba używają tego samego szablonu, w jaki sposób szablon jest zgodny z niestandardowym komunikatem o błędzie?

Mam nadzieję, że ma to sens.

Answer 1

Możliwe jest wyświetlenie ikony i wyświetlenie komunikatu o błędzie podczas unoszenia.

W jednym projekcie robimy coś podobnego. Pokazujemy odznakę z numerem błędu, ale używamy decorateElement, aby podświetlić pola i błędyAsTitleOnModified, aby wyświetlić błędy po najechaniu kursorem na dane wejściowe.

Aby utworzyć komunikat o błędzie, należy zawinąć szablon w znaczniku skryptu. Działa jak szablony z ko template binding.

Wewnątrz szablonu można uzyskać dostęp do zatwierdzonego obserwowalnego, odwołując się do "pola". Komunikat o błędzie jest przechowywany we właściwości "błąd" twojego obserwowalnego.

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

Stworzyłem skrzypce to pokazać w akcji: http://jsfiddle.net/nuDJ3/180/