Проблемы с шаблоном пользовательских сообщений для проверки нокаута

Я не использовал проверку нокаута, и я пытаюсь понять, что с ним можно сделать.

Я пытаюсь выяснить, можно ли отображать значок, а не сообщение об ошибке справа от входного тега при возникновении ошибки. И, если пользователь нависает над значком, отображается сообщение об ошибке.

Кто-нибудь это сделал или имеет представление о том, как это сделать?

Спасибо.

EDIT: (более подробный пример того, что я пытаюсь сделать)

Скажем, у меня есть следующая модель моей модели:

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

Мой HTML:

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

Я понимаю, что если текстовое поле первого имени оставлено пустым, то (по умолчанию) текст справа будет отображаться справа от текстового поля, в котором указано, что это поле требуется.

Я пытаюсь понять, как изменить поведение по умолчанию при отображении ошибки текст справа на отображение значка справа, который при зависании, выведет сообщение об ошибке.

Итак, начало будет выглядеть примерно так:

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

У меня нет подсказки, если я правильно использую функцию messageTemplate. Я также не знал бы, что привязать текст в customTemplate, чтобы отобразить правильное сообщение об ошибке для каждой ошибки. IOW, firstname и lastname могут иметь собственные сообщения об ошибках. Если они оба используют один и тот же шаблон, как шаблон вмещает пользовательское сообщение об ошибке?

Надеюсь, это имеет смысл.

Ответы

Ответ 1

Можно отобразить значок и отобразить сообщение об ошибке при зависании.

В одном проекте мы делаем что-то подобное. Мы показываем значок с номером ошибки, но мы используем decorateElement, чтобы выделить поля и errorsAsTitleOnModified, чтобы показать ошибки при наведении курсора на ввод.

Чтобы создать сообщение об ошибке, необходимо обернуть шаблон в тег script. Он работает как шаблоны привязки ko.

Внутри шаблона вы можете получить доступ к проверяемому наблюдаемому, обратившись к "field". Сообщение об ошибке сохраняется в свойстве "ошибка" вашего наблюдаемого.

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

Я создал скрипку, чтобы показать это в действии: http://jsfiddle.net/nuDJ3/180/