敲除-验证:绑定到validationMessage更改

Question

我正在开发一个使用敲除验证的表单，并且我有一个与显示验证消息的span相关联的confirmPassword输入(也就是说，在ko.validation.init中，insertMessages设置为false )。我希望在这个跨度上有一个幻灯片动画，所以它封装在一个div中，这个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，我有两条不同的消息，这取决于错误：

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发生变化时，我如何才能触发一个事件？

Answer 1

我已经找到了一种可行的方法，但它并不是优雅的。knockout.validation的v2.0似乎可以使这个场景更容易观察到，但与此同时，您可以通过为具有多个observable.error的可观察对象进行第二个自定义绑定来解决像我这样的问题，并且在消息发生变化时需要做一些事情：

视图模型添加：

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

Html更新：

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

自定义绑定添加：

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