淘汰验证 addClass 到验证元素的父级答案

【问题标题】：Knockout validation addClass to parent of validation element淘汰验证 addClass 到验证元素的父级
【发布时间】：2014-01-10 18:53:38
【问题描述】：

如何在元素父级的淘汰赛验证中使用我的类？我的代码在这里

<li>
    <label for="">Residence:</label>         
    <select data-bind="options: passengerDocs.countries(),
                       optionsText: 'Key', optionsCaption: 'ChooseCountry',
                       value: Passport().CountryOfResidenceName">
    </select>
</li>

我将此代码添加到了 knockout.validation.debug.js

ko.bindingHandlers['validationElement'] = {
        update: function (element, valueAccessor) {
        var obsv = valueAccessor(),
            config = utils.getConfigOptions(element),
            val = ko.utils.unwrapObservable(obsv),
            msg = null,
            isModified = false,
            isValid = false;

        var valueIsValid = valueAccessor().isValid();
        if (!valueIsValid) {
            $(element).parent().addClass('passengerDetails_error');
        } else {
            $(element).parent().removeClass('passengerDetails_error');
        }.........

但它没有将类passengerDetails_error 添加到li 有任何想法吗？谢谢

【问题讨论】：

您不需要更改内置的validationElement 或创建一堆新的计算属性...您可以直接在li 上使用validationElement 和正确的@ 987654327@jsfiddle.net/DAjuY
@nemesv 虽然您的评论在演示如何巧妙地实现验证方法方面很有用，但这如何解决 Guy Z 关于将验证类应用于父元素的问题，因为他明确要求?除非我遗漏了一些明显的东西，否则您的小提琴示例只会将类应用于 li 项目而不是 ul 项目？
@CarlEdwards 虽然我的评论显示了一个不像 OP 想要的那样通用的解决方案，但它仍然可能是一个很好的折衷方案，并且 OP 明确表示他希望对 li 元素进行验证：“但是它没有将类passengerDetails_error 添加到li 有什么想法吗？”
@nemesv 抱歉。现在我重新阅读了操作，我可以看到我做了一个错误的假设，即他希望将类应用于

标签： knockout.js knockout-validation

【解决方案1】：

我认为你走在正确的道路上。我认为您不需要更改敲除验证代码，而是可以为您的案例创建一个新的绑定处理程序：

ko.bindingHandlers.parentValidationElement = {
    update: function (element, valueAccessor, allBindingsAccessor) {
        var cssClass = ko.utils.unwrapObservable(valueAccessor);
        var obs = ko.utils.unwrapObservable(allBindingsAccessor()).value;

        var decorateElement = obs.isModified() && !obs.isValid();
        if (decorateElement) {
            $(element).parent().addClass(cssClass);
        } else {
            $(element).parent().removeClass(cssClass);
        }
    }
}

类似：

<li>
    <label for="">Residence:</label>
    <input type="text" data-bind="value: Residence, parentValidationElement: 'passengerDetails_error'" />
</li>

小提琴：http://jsfiddle.net/39kQj/

【讨论】：