3

Knockout.jsを使用して、フォームのエラーを強調表示したいと考えています。これらのエラーの中には、クライアント側の検証によって生成されるものもあれば、フォームの保存時にサーバーから発生するものもあります。理想的には、テンプレートは次のようになります。

<label data-bind="css: { error: Errors.ProjectName }">Project Name<input data-bind="value: ProjectName" /></label>

Errors.ProjectNameが true-ish の場合、上記の<label>CSS クラスはerror.

Errorsただし、これを行うには、次のようなものを作成する必要があると思います。

this.Errors = {
   ProjectName: ko.observable(false),
   FieldA: ko.observable(false),
   FieldB: ko.observable(false),
   // ... Every single field
};

このフォームには非常に多くのフィールドがあるため、これはメンテナンスの悪夢です。そのため、そうするのではなく、モデルに何らかの形でエラー フィールドのリストを含めたいと考えています。もっと好き：

this.Errors = ko.observableArray( [] );

コードがエラーを認識したら、その配列をエラーを含むフィールドのリストに設定するだけです。

model.Errors( ['ProjectName'] ); // ProjectName is invalid

テンプレートは次のようになります。

<label data-bind="css: { error: Errors.indexOf('ProjectName') >= 0  }">Project Name<input data-bind="value: ProjectName" /></label>

これは機能しますが、テンプレートで監視可能な配列インデックスをチェックする必要があるのはかなり面倒です。Knockout をマスターしようとしている私の一部は、よりクリーンで読みやすい方法を求めています。

Knockout.js は、エラー メッセージの表示や UI の検証に使用する適切なツールではないと主張する人もいるかもしれません。これはおそらく正しい意見です。ただし、エラーを保存する単一のモデルを使用するというアイデアが気に入っています。そのモデルにエラーが追加または削除されると、エラー メッセージと UI の強調表示されたフィールドにこれらの変更が自動的に反映され、データの状態を簡単に照会できます。いつでも。

質問:モデルにエラーのあるフィールドのリストが含まれている場合に、エラーの強調表示を実装する最もクリーンな方法は何ですか?

4

1 に答える 1

4

私の好みは、その状態を追跡するために、オブザーバブルでisValidまたはサブオブザーバブルのようなものを使用することでした。hasErrorしたがって、ビューモデルは次のようになります。

this.ProjectName = ko.observable();
this.ProjectName.hasError = ko.observable();  //or can be a computed, if it will handle keeping itself updated

次に、次のようにバインドできます。

<label data-bind="css: { error: ProjectName.hasError  }">Project Name<input data-bind="value: ProjectName" /></label>

「サブオブザーバブル」のもう1つの優れた点は、データをJSONに変換してサーバーに送信するときにドロップオフすることです。

エクステンダーを使用してサブオブザーバブルを追加するKOドキュメントの例があります：http：//knockoutjs.com/documentation/extenders.html#live_example_2_adding_validation_to_an_observable

また、同様のアプローチを使用しているため、Knockout-Validationを確認することをお勧めします。

于 2013-03-18T19:30:02.580 に答える