敲除验证未使用敲除自定义绑定触发 [英] Knockout validation not firing with knockout custom binding

问题描述

我有一个敲除自定义绑定处理程序，用于需要通过敲除验证进行验证的输入.但是，我没有做过任何工作.验证未触发.我可以在绑定到相同viewmodel属性的输入上的普通ko值绑定上获得验证触发.

I have a knockout custom binding handler for an input that I need to have validated by knockout-validation. However nothing I've done has worked. Validation is not fired. I can get validation firing on a plain ko value binding on an input bound to the same viewmodel property.

我从研究中发现的内容(ko文档，ko-validation github文档以及此问题

What I've found from my research (ko docs, ko-validation github docs and this SO question validationOptions not working with custom bindingHandlers amongst many others) is that you need:

ko.validation.makeBindingHandlerValidatable("yourcustombindinghandlername");

要进行KO验证，请注意您的自定义绑定处理程序.我有，但我仍然没有任何喜悦.

to make KO-validation take notice of your custom binding handler. I have that and I'm still getting no joy.

我已经尝试通过基因敲除-validation.js调试值绑定和自定义绑定，以查看发生了什么变化，但是我无法弄清楚自定义绑定验证的切入点是什么.我的JS并不是那么强大的TBH.

I've tried debugging through knockout-validation.js for both the value binding and custom binding to see what's happening differently but I can't work out what the entry point for the custom binding validation would be. My js isn't that strong TBH.

这是代码的非常简化的版本:

Here's a very simplified version of the code:

HTML:

<div>
<div id="vehicleQuoteDetails">
    <div>            
        <div>
            <!--with custom binding-->
            <input data-bind="vehiclemileage: quote.mileage, fieldName: 'mileage'" type="text" id="quoteMileage">
            <!--without custom binding-->
            <input data-bind="value:quote.mileage" class="form-control"/>
        </div>
    </div>
</div>
</div>

这是JS:

自定义绑定处理程序:

ko.bindingHandlers.vehiclemileage = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        $(element).on("blur", function (evt) {
            if (evt.timeStamp !== undefined) {
                var fieldName = allBindingsAccessor().fieldName;
                bindingContext.$root.update[fieldName]($(element).val());

            }
            //return true;
        });
        //return true;
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).val(value);
        //return true;
    }
}

Viewmodel:

Viewmodel:

function JobQuoteViewModel() {
    var self = this;

    self.quote = {};

    self.getQuote = function () {

        self.quoteMapping = {
            "mileage": {
                create: function (options) {
                    return ko.observable(options.data).extend({ required: true });
                }
            }
        }

                var quoteResult = { mileage:1234 }

        ko.validation.init();
        ko.validation.makeBindingHandlerValidatable("vehiclemileage");
        self.quote = ko.mapping.fromJS(quoteResult, self.quoteMapping);
        ko.applyBindings(self);

        //$.ajax({
        //    url: "webapplication6/Home/GetQuote",
        //    type: "GET",
        //    dataType: "JSON",
        //    success: function (result) {
        //        ko.validation.init();
        //        ko.validation.makeBindingHandlerValidatable("vehiclemileage");
        //        self.quote = ko.mapping.fromJS(result.data, self.quoteMapping);
        //        ko.applyBindings(self);
        //    }
        //});
    };

    self.update = {
        mileage: function (value) {

            alert('mileage: ' + value);
        }
    }
    self.getQuote();
}

查看模型实例:

var jobQuoteVM = new JobQuoteViewModel();

这是上面的小提琴: https://jsfiddle.net/stevedavey/1j6vphya/

在示例中，我有两个输入:一个绑定到一个自定义绑定处理程序，另一个绑定到一个简单的值绑定.后者是为了证明对纯值绑定的验证效果很好.

In the example I've got two inputs: one bound to a custom binding handler and one to a simple value binding. The latter is to demonstrate the validation on the plain value binding works fine.

左边的输入是一个自定义绑定处理程序的绑定，右边的输入是值绑定.

The input on the left is the one bound to a custom binding handler and the input on the right is the value binding.

TIA寻求帮助.

推荐答案

好像您没有正确更新可观察对象.例如，您可以使用简单的计算机来做到这一点:

Looks like you don't properly update the observable. You could for example use a simple computed to do so:

https://jsfiddle.net/otjg2L8z/2/

我已对您的自定义绑定进行了轻微修改:

I've slightly amended your custom binding:

ko.bindingHandlers.vehiclemileage = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

        var formattedValue = ko.pureComputed({
            read: function () {
                var text = valueAccessor()();
                return text;
            },
            write: function (newValue) {
                valueAccessor()(newValue);
            }
        });
        ko.utils.registerEventHandler(element, "blur", function (evt) {
            var modelValue = valueAccessor(),
                elementValue = $(element).val();
            if (ko.isWriteableObservable(modelValue)) {
                formattedValue(elementValue);
            }    

            if (evt.timeStamp !== undefined) {
                var fieldName = allBindingsAccessor().fieldName;
                bindingContext.$root.update[fieldName]($(element).val());

            }
        });

        //return true;
    },
    update: function (element, valueAccessor, allBindingsAccessor,     viewModel, bindingContext) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).val(value);
        //return true;
    }
}

这篇关于敲除验证未使用敲除自定义绑定触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！