7

私は Knockout.Validation を使用しており、各行にエラー メッセージ (明らかに!) とそれに関連するビュー モデルのフィールド名が表示されるエラーの概要を表示できるようにしたいと考えています。

  • 年齢 - 数字を入力してください
  • 生年月日 - 適切な日付を入力してください

これまでのところ、ビュー モデルをラップする validatedObservable があり、これによりビューモデルにすべてのエラーを含むエラー配列が自動的に配置されます。ただし、各エラーがどのフィールドに関連しているかを簡単に取得する方法がわかりません。

ビュー モデルを自分でトラバースして、isValid プロパティから独自のエラー コレクションを構築できることはわかっていますが、これが唯一の選択肢でしょうか?

フィールド名を取得したら、検証の概要をそのフィールドに関連する「わかりやすい」ラベルにマップできます (たとえば、「DateOfBirth」ではなく「生年月日」)。

ここに私がこれまでに持っているコードの簡略化されたバージョンがあります:

ビューモデル

function PersonModel(){
   var self = this;
   self.Age = ko.observable().extend({ number: true});

   self.DateOfBirth = ko.observable({ date: true});             
   self.Validate = function() {                           
       if (!self.isValid()) {                                         
          self.errors.showAllMessages();        
          return false;          
       }
       return true;
    };    

ko.validation.init({
                grouping: { deep: true, observable: true },
                registerExtenders: true,
                messagesOnModified: true,
                insertMessages: true
            });

ko.applyBindings(ko.validatedObservable(new PersonModel()));

HTML

<ul data-bind='foreach: model().errors' class="message">
    <li>
           <span data-bind='text:  $data'></span>
    </li>
</ul>

どうもありがとう

4

6 に答える 6

7

次のことができます。

  • エクステンダーを追加friendlyNameして、オブザーバブルにわかりやすい名前を付けます
  • メッセージを表示するバインディング ハンドラをハックする

分かりやすい名前：

これまでで最もシンプルなノックアウト エクステンダー:

ko.extenders.friendlyName = function (obs, options) {
    obs.friendlyName = options;
}

使用法：self.Age = ko.observable(3).extend({ friendlyName: "My Age" });

表示メッセージ ハック:

ノックアウト検証プラグインは、validationMessageエラー メッセージを表示するバインディング ハンドラを作成します。直接 (いくつかの html マークアップを使用して) 使用するか、構成オプションを使用してプラグインにメッセージを処理させることができますinsertMessages。

ここでは、作成する html を編集して (元のバインディング ハンドラーは引き続き呼び出されます)、friendlyName考慮に入れます。

var originalValidationMessageUpdate= ko.bindingHandlers.validationMessage.update;
ko.bindingHandlers.validationMessage.update = 
    function (element, valueAccessor, allBindingAccessor, viewModel, 
              bindingContext) {
        if (originalValidationMessageUpdate)
            originalValidationMessageUpdate(element, valueAccessor, 
                                            allBindingAccessor, viewModel,
                                            bindingContext);
        var prepend = (ko.isObservable(valueAccessor()) 
                            && valueAccessor().friendlyName)
                                  ? valueAccessor().friendlyName + " - "
                                  : "";

        $(element).html(prepend + $(element).html());
        // ^^^^ This is the line that is actually useful
    }

注：friendlyName更新されないと思われるため、オブザーバブルとして作成しませんでしたが、それを行うことは可能です。

デモ

于 2014-06-20T13:43:16.923 に答える
7

任意の変数に対してカスタム検証メッセージを使用できます。

emailAddress: ko.observable().extend({
    required: { message: 'Email Address: Required field.' }
}),
于 2013-08-08T18:46:30.577 に答える
2

残念ながら、GôTô が提案したような完全なカスタムを行わない限り、バリデータごとにメッセージを指定する必要があります。

考えてみてください... フィールドの表示名を指定していないのに、ko 検証はどのようにして検証エラー メッセージのフィールド名を認識するのでしょうか?

最も簡単な方法：

self.Age = ko.observable().extend({ 
   number: {
      params: true,
      message: 'Age - please enter a number'
   },
   required: { 
      params: true,
      message: 'Age is required'
   }
});

努力が正当化される場合は、デフォルトのメッセージング動作の拡張に投資することをお勧めします。それ以外の場合は、各プロパティの各バリデータのメッセージを指定する方が簡単です。

于 2014-06-24T06:42:40.583 に答える