1

MVC の ASP.NET(Validation Error) と同様の方法で、HTML テーブルで編集されているフィールドのすぐ下に検証エラー メッセージを表示する方法を見つけようとしています。

サンプルまたはリンクをいただければ幸いです。

これが私が試したことです。観察可能ではないと思うので、エラーメッセージをすぐに更新していません。

<script id="editTmpl" type="text/html">
   <tr>
       <td><input data-bind="value: Country_Code "/>

            <div data-bind="if: $data.entityAspect.getValidationErrors().length>0">
             <pre data-bind="text:  $data.entityAspect.getValidationErrors('Country_Code')[0].errorMessage "></pre>
        </div>


       </td>
       <td><input data-bind="value: Country_Name"/></td>
        <td class="buttons">
            <a class="btn btn-success" data-bind="click: $root.save" href="#" title="save"><i class="icon-ok"></i></a>
            <a class="btn" data-bind="click: $root.cancel" href="#" title="cancel"><i class="icon-trash"></i></a>
        </td>
   </tr>
</script>
4

1 に答える 1

5

getValidationErrorsノックアウト観測可能ではないのは正しいです。これは、エンティティの現在の Breeze 検証エラーのコレクションを返す単純な関数です。

ただし、そのコレクションへの変更をリッスンできるイベントがあります。イベントがある場合、バインドできる KO オブザーバブルを作成する方法があります。このようなオブザーバブルをエンティティに追加する 1 つの方法を次に示します。

関数 addhasValidationErrorsProperty(エンティティ) {

     var prop = ko.observable(false);

     var onChange = 関数 () {
         var hasError = entity.entityAspect.getValidationErrors().length > 0;        
         if (prop() === hasError) {
             // エンティティのネット エラー状態が変更されていなくても、コレクションが変更されました
             prop.valueHasMutated(); //強制通知
         } そうしないと {
             prop(hasError); // 値を変更して通知
         }
     };

     onChange(); // 今すぐチェック ...
     entity.entityAspect // ... エラー コレクションが変更されたとき
         .validationErrorsChanged.subscribe(onChange);

     // 監視可能なプロパティが接続されています。今それをエンティティに追加します
     entity.hasValidationErrors = プロップ;
}

次に、次のようなものを書くことができるはずです。

  <div data-bind="if: hasValidationErrors">
     <pre data-bind="text: $data.entityAspect.getValidationErrors('Country_Code')[0].errorMessage "></pre>
  </div>

このaddhasValidationErrorsPropertyメソッドは、DocCode:validationTests.jsの " Trigger KO 計算プロパティ with validationErrorsChanged " テスト内で実行されます。

気に入った場合は、here で説明されているようEntityTypeに、構築後のイニシャライザ内で呼び出すことをお勧めします。

エクストラクレジット

好きじゃない

$data.entityAspect.getValidationErrors('Country_Code')[0].errorMessage

これをすべての Breeze エンティティの関数に変換できればと思いますが、Breeze エンティティには基本型がありません。

このような関数を使用して、特定の Breeze エンティティ タイプのプロトタイプを拡張できます。おそらく、これを行うのに最適なタイミングは、hasValidationErrorsプロパティでそのタイプを構成している間です。

Employeeエンティティ タイプを扱っているとします。アプリケーションのブートストラップの早い段階で、次のように記述できます。

var ストア = manager.metadataStore; // MetadataStore を取得する 1 つの方法

// ダミーの従業員コンストラクター; 多分あなたは本物を持っています
var employeeCtor = function() {};

// ヘルパー メソッドでプロトタイプを拡張します
employeeCtor.prototype.getFirstValErrMsg = 関数 (pname) {
        var errs = this.entityAspect.getValidationErrors(pname);
        リターン (errs.length) ? エラー[0].errorMessage: "";
    };

// ctor とイニシャライザの両方を登録します
store.registerEntityTypeCtor(
       "従業員"、
       employeeCtor, // カスタム ctor
       addhasValidationErrorsProperty); // 初期化子

これで、次のようにバインドできるはずです。

  <div data-bind="if: hasValidationErrors">
     <pre data-bind="text: $data.getFirstValErrMsg('Country_Code')"></pre>
  </div>

このアプローチの一部 (例:getFirstValErrMsg拡張機能とaddhasValidationErrorsPropertyメソッド) をテストしましたが、まだすべてに慣れていません。たぶん、あなたはそれを私たちのために次のステップに進めて、あなたの発見を報告することができます.

于 2012-12-29T10:40:36.823 に答える