1

ノックアウト検証を使用するフォームに取り組んでおり、検証メッセージを表示するスパンに関連付けられた confirmPassword 入力があります (つまり、ko.validation.init で insertMessages を false に設定しています)。このスパンにスライドイン アニメーションが必要なので、高さを変更するためのカスタム バインディングを持つ div にラップされます (高さに CSS トランジションが設定されています)。

<div class="slideOuter">
    <div class="slideInner" data-bind="slideElement: confirmPassword.isModified() & !confirmPassword.isValid()">
        ...
        <span class="form-control" data-bind="validationMessage: confirmPassword"></span>
        ...

バインディング コード:

ko.bindingHandlers.slideElement = {
    update: function (element, valueAccessor, allBindings) {
        // First get the latest data that we're bound to
        var value = valueAccessor();

        // Next, whether or not the supplied model property is observable, get its current value
        var valueUnwrapped = ko.unwrap(value);

        var $outer = $(element).closest('.slideOuter');
        var $inner = $(element).closest('.slideInner');

        if (valueUnwrapped == true) {
            // Make the element visible
            $(element).css('display', 'block');
            setTimeout(function () { $outer.css('height', $inner.outerHeight(true) + "px"); }, 0);
        }
        else {
            // Make the element invisible
            $(element).css('display', 'none');
            $outer.css('height', "0px");
        }
    }
};

問題は、validationMessage が変更されたときにこのカスタム バインディングを起動することです。このセットアップは、validationMessage が同じままである限りうまく機能しますが、confirmPassword を使用すると、エラーに応じて 2 つの異なるメッセージが表示されます。

self.confirmPassword = ko.observable("").extend(
   {
       required:
           {
               params: true,
               message: "Confirm Password is required"
           },
       equal:
           {
               params: self.password,
               message: "The confirmation does not match the password"
           }
    });

フォームにあるスペースでは、最初のメッセージは 1 行だけを占め、2 番目のメッセージは 2 行を占めます。問題は、2 つのメッセージを切り替えるとカスタム バインディングが起動しないため、スライド div の高さが validationMessage の新しいサイズを補正しないことです。（つまり：最初に確認パスワードを入力しないので、短いメッセージはvalidationMessageであり、slideElementカスタムバインディングが起動し、divを適切な高さに設定します。次に、確認パスワードをパスワード以外のものに変更します。 '一致しないため、2 番目のメッセージが新しい validationMessage になり、div に表示されます...ただし、カスタム バインディングが起動せず、div の高さが補正されません。)

validationMessage が変更されたときにイベントを発生させる方法を知っている人はいますか?

4

1 に答える 1