1

私は KnockOut 検証に取り組んでおり、これまでのところ良好です。でも質問があります。次のようなコードがあります。

 shippingMethodModel.Description.extend({ required: true });

そして、それは以下の検証メッセージを示していますが、保存ボタンを無効にするために読み取ることができるフラグまたは何かを設定していますか?

4

2 に答える 2

2

私は以下をセットアップします：

saveEnabled = ko.computed(function(){
    // possible other logic
    return shippingMethodModel.Description.isValid();
});

そしてあなたのHTMLで：

<button data-bind="enable: saveEnabled"> Save </button>

または、モデルに複数のプロパティがある場合は、次のようにすることができます。

ko.validation.group(shippingMethodModel);

そしてあなたのHTMLで：

<button data-bind="enable: isValid"> Save </button>

この関数は、グループ化する対象にプロパティをgroup追加します。isValid

于 2012-09-12T21:28:59.943 に答える
2

私は最近これと同じ必要性を持っていたので、あなたが上で提供したコード行に基づいて私がしたことを翻訳しようとします...

次のような ko.computed observable を追加してみてください。

shippingMethodModel.formIsNotValid = ko.computed(function () {
    // original line
    // var errors = ko.utils.unwrapObservable(ko.validation.group(self));

    // ** oops, not "self" in this case

    // UPDATED line
    var errors = ko.utils.unwrapObservable(ko.validation.group(shippingMethodModel));
    return (errors.length > 0);
});

更新 エラーに気付いた後、上記のコードを修正しました。

このようなモデル/クラスを一度に関数として宣言する場合、このコードは次のようになります。

var ShippingMethodModel = function () {
    var self = this;
    self.shippingMethodId = ko.observable().extend({ required: true });
    self.description = ko.observable().extend({ required: true });

    self.formIsNotValid = ko.computed(function () {
        var errors = ko.utils.unwrapObservable(ko.validation.group(self));
        return (errors.length > 0);
    });
};

/アップデート

UPDATE2 以下のコメントの@ericb からの入力に基づいて、独自のソリューションを実装する方法に変更を加えました。

var ShippingMethodModel = function () {
    var self = this;
    self.shippingMethodId = ko.observable().extend({ required: true });
    self.description = ko.observable().extend({ required: true });

    self.formIsNotValid = ko.observable(false);

    self.validateObservableFormField = function (nameOfObservableToValidate, 
                                                 data, event) {
        for (var prop in data) {
            if (prop === nameOfObservableToValidate) {
                var theObservable = data[prop];
                theObservable.valueHasMutated();
                ko.validation.validateObservable(theObservable);
                if (theObservable.error) {
                    self.formIsNotValid(true);
                }
                else {
                    if (self.formIsNotValid()) {
                        var errors = 
                            ko.utils.unwrapObservable(ko.validation.group(self));
                        self.formIsNotValid(errors.length > 0);
                    }
                }
                return;
            }
        }
    };        
};

formIsNotValidオブザーバブルとして定義したことに注意してください。ただし、このvalidateObservableFormField関数を使用して、送信前のフォームの有効性を判断できるようにしています。この変更により、ko.validation.group関数が必要な場合にのみ呼び出されるようになり、その呼び出しは、検証されているオブザーバブルが有効であるformIsNotValidが true である場合にのみ必要になります (現在のオブザーバブルが true に設定されていた場合を処理するためformIsNotValid)。

これが私がこれをどのように行っているかの例です:

<input data-bind="value: description, 
                  event: { blur: function(data, event) {
                                     validateObservableFormField('facilityName', 
                                                                  data, 
                                                                  event) 
                                 }
                         }" />

水平スクロールをなくすためのあいまいな書式設定

注:既にこの手法を使用していましたが、フォームが有効かどうかを確認するパフォーマンスを向上させるために適応させました。@Californicated、前回のコメントの後、検証済みのフォーム フィールドのぼかしイベントからこの関数を呼び出すことが、保存/送信ボタンが有効な状態と無効な状態の間で切り替わる理由であることに気付きました。

パフォーマンスのヒントを提供してくれた @ericb に改めて感謝します。

誰からのさらなるヒントも、いつでも大歓迎です！

/UPDATE2

それができたら、ボタンを無効にすることは、ボタンを無効にする方法（および/またはおよび/または他のメソッドなど）に適した方法で、そのformIsNotValid計算されたオブザーバブルにバインドすることです。css: { 'ui-state-disabled': formIsNotValid }disable: formIsNotValid

これがお役に立てば幸いです。問題が発生した場合はお知らせください。

于 2012-09-12T21:01:33.973 に答える