敲除验证不触发敲除自定义绑定

Question

我有一个用于输入的敲除自定义绑定处理程序，我需要通过敲除验证对其进行验证。但是我所做的一切都没有奏效。不会触发验证。我可以在绑定到同一视图模型的输入上的普通 ko 值绑定上触发验证属性。

我从研究中发现的内容（ko 文档、ko-validation github 文档和这个 SO 问题 validationOptions not working with custom bindingHandlers 在许多其他人中）是你需要：

ko.validation.makeBindingHandlerValidatable("yourcustombindinghandlername");

让 KO 验证注意到您的自定义绑定处理程序。我有那个，但我仍然没有快乐。

我已经尝试通过 knockout-validation.js 对值绑定和自定义绑定进行调试，以查看发生了什么不同，但我无法弄清楚自定义绑定验证的入口点是什么。我的 js 不是那么强大的 TBH。

这是代码的一个非常简化的版本：

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

视图模型：

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

上面的 fiddle 是：https://jsfiddle.net/stevedavey/1j6vphya/

在示例中，我有两个输入：一个绑定到自定义绑定处理程序，一个绑定到简单值绑定。后者是为了证明对普通值绑定的验证工作正常。

左边的输入是绑定到自定义绑定处理程序的输入，右边的输入是值绑定。

TIA 寻求任何帮助。

Answer 1

您似乎没有正确更新可观察对象。例如，您可以使用简单的计算来执行此操作：

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

我稍微修改了您的自定义绑定：

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

敲除验证不触发敲除自定义绑定

Knockout validation not firing with knockout custom binding

javascript

knockout.js

knockout-validation