淘汰赛验证未通过淘汰赛自定义绑定触发

Question

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

我从研究中发现的内容（ko docs、ko-validation github docs 和这个 SO question 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();

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

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

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

TIA 寻求帮助。

Answer 1

看起来您没有正确更新 observable。例如，您可以使用简单的计算来执行此操作：

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