Knockout.js 淘汰验证：绑定到validationMessage更改

我正在处理一个使用敲除验证的表单，我有一个confirmPassword输入，它与显示验证消息的范围相关联（即，我在ko.validation.init中将insertMessages设置为false）。我希望在这个跨度上有一个幻灯片动画，因此它被包装在一个div中，该div具有一个自定义绑定来更改高度（我在高度上设置了一个css转换）：

问题是在validationMessage更改时启动此自定义绑定。只要validationMessage保持不变，此设置就非常有效，但对于confirmPassword，根据错误，我有两条不同的消息：

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

根据我在表单上的空间，第一条消息只占用一行，第二条消息占用两行。问题在于，由于在两条消息之间切换时不会触发自定义绑定，因此幻灯片div的高度无法补偿validationMessage的新大小。（即：首先，我没有输入任何确认密码，因此较短的消息是validationMessage，slideElement自定义绑定将触发并将div设置为适当的高度。然后我将确认密码更改为密码以外的其他密码，它不匹配，因此第二条消息成为新的validationMessage并显示在div…但自定义绑定不会启动，div的高度也无法补偿。）

---

有人知道我如何在validationMessage更改时触发事件吗？

我找到了一种方法使其可行，但它很难做到优雅。似乎knockout.validation的v2.0通过使observable.error变得可观察，可能会使此场景更容易，但与此同时，您可以通过为具有多条validationMessages的observable创建第二个自定义绑定来解决类似于我的问题，并且当消息发生更改时，您需要执行以下操作：

视图模型添加：

self.confirmPassword.ValMsg = null;
    self.confirmPassword.ValMsgUpdate = ko.observable(false);
    self.confirmPassword.subscribe(function (newValue) {
        if (self.confirmPassword.ValMsg != self.confirmPassword.error)
        {
            self.confirmPassword.ValMsg = self.confirmPassword.error;
            self.confirmPassword.ValMsgUpdate(true);
            self.confirmPassword.ValMsgUpdate(false);
        }
    });

ko.bindingHandlers.slideElementUpdate = {
        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);

            if (valueUnwrapped == true) {
                var $outer = $(element).closest('.slideOuter');
                var $inner = $(element).closest('.slideInner');
                $outer.css('height', $inner.outerHeight(true) + "px");
            }
        }
    };

Html更新：

<div class="slideInner" data-bind="slideElement: confirmPassword.isModified() & !confirmPassword.isValid(), slideElementUpdate: confirmPassword.ValMsgUpdate()">

---

我已经找到了一种可行的方法，但它并不优雅。似乎knockout.validation的v2.0通过使observable.error变得可观察，可能会使此场景更容易，但与此同时，您可以通过为具有多条validationMessages的observable创建第二个自定义绑定来解决类似于我的问题，并且当消息发生更改时，您需要执行以下操作：

视图模型添加：

self.confirmPassword.ValMsg = null;
    self.confirmPassword.ValMsgUpdate = ko.observable(false);
    self.confirmPassword.subscribe(function (newValue) {
        if (self.confirmPassword.ValMsg != self.confirmPassword.error)
        {
            self.confirmPassword.ValMsg = self.confirmPassword.error;
            self.confirmPassword.ValMsgUpdate(true);
            self.confirmPassword.ValMsgUpdate(false);
        }
    });

ko.bindingHandlers.slideElementUpdate = {
        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);

            if (valueUnwrapped == true) {
                var $outer = $(element).closest('.slideOuter');
                var $inner = $(element).closest('.slideInner');
                $outer.css('height', $inner.outerHeight(true) + "px");
            }
        }
    };

Html更新：

<div class="slideInner" data-bind="slideElement: confirmPassword.isModified() & !confirmPassword.isValid(), slideElementUpdate: confirmPassword.ValMsgUpdate()">