11

私はノックアウト検証を使用したことがなく、それを使用して何ができるかを感じ取ろうとしています。

エラーが発生したときに、入力タグの右側にエラーメッセージではなくアイコンを表示できるかどうかを調べています。また、ユーザーがアイコンにカーソルを合わせると、エラーメッセージが表示されます。

誰かがこれをしたか、これを達成する方法のアイデアを持っていますか？

ありがとう。

編集:(私がやろうとしていることのより詳細な例）

ビューモデルに次のものがあるとします。

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には、カスタムエラーメッセージが含まれる場合があります。両方が同じテンプレートを使用している場合、テンプレートはカスタムエラーメッセージにどのように対応しますか？

それが理にかなっていることを願っています。

4

1 に答える 1

18

ホバリング時にアイコンを表示したり、エラーメッセージを表示したりすることができます。

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

エラーmessageTemplateを作成するには、テンプレートをスクリプトタグでラップする必要があります。これは、koテンプレートバインディングのテンプレートのように機能します。

テンプレート内では、「フィールド」を参照することで、検証済みのオブザーバブルにアクセスできます。エラーメッセージは、observableのプロパティ'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/

于 2013-01-25T14:03:11.820 に答える