Question

我有一个敲除自定义绑定处理程序，我需要通过knockout-validation验证输入。然而，我所做的一切都没有奏效。验证不会被触发。我可以在绑定到同一viewmodel属性的输入上的普通ko值绑定上获取验证。

我从我的研究中发现了什么（ko docs，ko-validation github docs和这个问题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;
    }
}

Knockout验证没有使用knockout自定义绑定触发

1 个答案: