javascript - knockout 验证未通过 knockout 自定义绑定(bind)触发

Question

我有一个用于输入的 knockout 自定义绑定(bind)处理程序，我需要通过 knockout 验证对其进行验证。然而我所做的一切都没有奏效。验证不会被触发。我可以在绑定(bind)到同一 View 模型属性的输入上的普通 ko 值绑定(bind)上触发验证。

我从我的研究中发现了什么(ko 文档、ko-validation github 文档和这个 SO 问题 validationOptions not working with custom bindingHandlers其中许多)是您需要:

ko.validation.makeBindingHandlerValidatable("yourcustombindinghandlername");

要进行 KO 验证，请注意您的自定义绑定(bind)处理程序。我有这个，但我仍然没有得到快乐。

我尝试通过 Knockout-validation.js 对值绑定(bind)和自定义绑定(bind)进行调试，以查看发生的情况不同，但我无法弄清楚自定义绑定(bind)验证的入口点是什么。说实话，我的 js 没那么强。

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

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:

自定义绑定(bind)处理程序:

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

View 模型:

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/

在示例中，我有两个输入:一个绑定(bind)到自定义绑定(bind)处理程序，另一个绑定(bind)到简单值绑定(bind)。后者是为了演示对纯值绑定(bind)的验证工作正常。

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

TIA 寻求帮助。

Answer 1

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

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

我稍微修改了您的自定义绑定(bind):

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