ノックアウト検証カスタムメッセージテンプレートの問題

Question

私はノックアウト検証を使用していませんでした。私はノックアウト検証で何ができるのかを感じています。

エラーが発生したときに、入力タグの右側にエラーメッセージではなくアイコンを表示できるかどうかを判断しようとしています。また、ユーザーがアイコンの上を移動すると、エラーメッセージが表示されます。

誰でもこれを行っているのですか、これを達成する方法がありますか？

ありがとうございました。

EDIT：

は私が私の見解モデルに次のように持っていると言う（私は何をしようとしているのより詳細な例）：

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

マイHTML：

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

私の理解では、最初の名前のテキストボックスを空白のままにしておくと、デフォルトでは、このフィールドが必須であることを示すテキストがテキストボックスの右側に表示されます。私は理解しようとしている何

はホバー時に、エラーメッセージがポップアップします、右のアイコンを表示する右のエラーテキストを表示するデフォルトの動作を変更する方法です。

ので、スタートは次のようなものになるだろう：私が正しくmessageTemplate機能を使用している場合、私は見当もつかない

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

。また、エラーごとに正しいエラーメッセージを表示するために、customTemplateにテキストをバインドするべきかどうかもわかりません。 IOW、ファーストネームとラストネームにカスタムエラーメッセージがある可能性があります。両方が同じテンプレートを使用している場合、テンプレートはどのようにカスタムエラーメッセージに対応していますか？

私はそれが理にかなっていると思います。

Answer 1

アイコンを表示し、ホバーリング時にエラーメッセージを表示することは可能です。

1つのプロジェクトでは、同様のことを行っています。バッジにはエラー番号が表示されますが、decorateElementを使用してフィールドを強調表示し、errorsAsTitleOnModifiedを使用して入力上にカーソルを置いたときのエラーを表示します。

エラーメッセージテンプレートを作成するには、テンプレートをスクリプトタグで囲む必要があります。それはko template bindingのテンプレートのように機能します。

テンプレート内では、 'field'を参照して検証済み観測値にアクセスできます。エラーメッセージは、オブザーバブルのプロパティ 'error'に格納されます。

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