20

マッピングされたビューに検証を添付しようとしています。Knockout Mapping および Validation プラグインを使用しています。疑似モデル:

Person {
    int Id;
    string Name;
    Book[] Books;
}

Book {
    int Id;
    string Name;
}

Javascript:

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());
});

personobservableArray を拡張して検証ルールとメッセージを設定するにはどうすればよいですか? person と books の両方のサブ配列プロパティを検証する必要があります。次のような自動マッピングなしで、明示的なモデル設定を使用する例のみを見つけました。

Name: ko.observable().extend({ required: true })

次に、ko.validatedObservable、isValid、および validation.init を設定する必要がありますが、これを処理/整理する方法が本当にわかりません。助けてください。

4

2 に答える 2

30

ko.mapping プラグインを介して作成されたモデルまたはビュー モデル オブジェクトに検証を提供する方法を少なくとも 2 つ見つけました。

  1. マッピング オプションを使用して、特定のプロパティが作成されるときに検証ルールを添付します
  2. HTML5 属性。これは、一部の検証 (つまり、必須、パターン) でのみサポートされています。詳細については、Knockout-Validation プラグインのドキュメントを参照してください。

上記の 2 つの手法を組み合わせることもできます。例については、次のフィドルを参照してください。

1. マッピング オプションの使用

Knockout Mapping プラグインを使用すると、マップされたオブジェクトの特定のプロパティを作成してカスタマイズできます。この機能を利用して、プラグインのデフォルトの動作をオーバーライドし、マップされたプロパティの検証を追加できます。以下は例です

HTML

<input data-bind="value: name" />


Javascript

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 />


Javascript

// 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);
于 2013-01-02T03:13:00.237 に答える
4

もう 1 つの方法は、オブザーバブルがマップされた後にそれを拡張することです。

function viewModel() {
    var self = this;
    self.persons = ko.observableArray();

    // persons are retrieved via AJAX...
    ko.mapping.fromJS(persons, {}, self.persons);


    self.Name.extend({ required: true });
}
于 2014-03-12T21:08:42.843 に答える