マップされたビューに検証を添付しようとしています。Knockout Mapping および Validation プラグインを使用しています。疑似モデル:
Person {
int Id;
string Name;
Book[] Books;
}
Book {
int Id;
string Name;
}
ジャバスクリプト:
function viewModel() {
var self = this;
self.persons = ko.observableArray();
// persons are retrieved via AJAX...
ko.mapping.fromJS(persons, {}, self.persons);
}
jQuery(function( $ ) {
ko.applyBindings(new viewModel());
});
検証ルールとメッセージを設定するために、 persons observableArray を拡張するにはどうすればよいでしょうか? persons と books の両方のサブ配列プロパティを検証する必要があります。自動マッピングなしで明示的なモデル設定を使用する例のみを見つけました。次のようなものです:
Name: ko.observable().extend({ required: true })
次に、ko.validatedObservable、isValid、validation.init を設定する必要がありますが、これをどのように処理/整理すればよいのかまったくわかりません。助けていただけませんか?
ベストアンサー1
ko.mapping プラグインを介して作成されたモデルまたはビュー モデル オブジェクトに検証を提供する方法が少なくとも 2 つ見つかりました。
- マッピングオプションを使用して、特定のプロパティが作成されるときに検証ルールを添付します。
- HTML5属性。これは一部の検証（必須、パターンなど）でのみサポートされています。Knockout-Validation プラグインのドキュメント詳細については
上記の2つの手法を組み合わせることもできます。以下を参照してください。フィドル例えば。
1. マッピングオプションの使用
Knockout Mappingプラグインを使用すると、マップされたオブジェクトの特定のプロパティの作成をカスタマイズできます。この機能を利用して、プラグインのデフォルトの動作をオーバーライドし、マップされたプロパティの検証を追加できます。以下は例です。
html
<input data-bind="value: name" />
ジャバスクリプト
var data = { name: "Joe Shmo" };
var validationMapping = {
// customize the creation of the name property so that it provides validation
name: {
create: function(options) {
return ko.observable(options.data).extend( {required: true} );
}
}
};
var viewModel = ko.validatedObservable(ko.mapping.fromJS(data, validationMapping));
ko.applyBindings(viewModel);
2. HTML5 属性
Knockout Validation プラグインは、HTML コントロールで使用できる HTML5 検証属性の限定セットをサポートしています。ただし、それらを使用するにはparseInputAttributesオプションを有効にする必要があります。簡単な例を次に示します。
html
<input data-bind="value: name" required />
ジャバスクリプト
// this can also be configured through the "validationOptions" binding (https://github.com/ericmbarnard/Knockout-Validation/wiki/Validation-Bindings)
ko.validation.configure({
parseInputAttributes: true
});
var data = { name: "Joe Shmo" };
var viewModel = ko.validatedObservable(ko.mapping.fromJS(data));
ko.applyBindings(viewModel);