1

我正在处理一个使用敲除验证的表单，并且我有一个与显示验证消息的跨度相关联的 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 更改时触发事件？

4

1 回答 1

1

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

查看模型添加：

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");
            }
        }
    };
于 2013-11-04T05:25:31.647 回答