Knockout验证addClass到验证元素的父级

时间:2013-12-22 10:48:20

标签: knockout.js knockout-validation

如何在元素父元素的敲除验证中使用我的类? 我的代码在这里

<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 有任何想法吗? 感谢

1 个答案:

答案 0 :(得分:2)

我认为你走的是正确的道路。我不认为您需要更改淘汰验证代码,而是可以为您的案例创建一个新的绑定处理程序:

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/