Bro*_*ato 7 knockout.js breeze
我正在使用带有Knockout的durandal/breeze.
我正在努力验证我的输入ko.validation.
这是一个经典:
<input type="text" data-bind="value: myDate, validationOptions: { errorElementClass: 'input-validation-error'}" />
.input-validation-error {
background-color: #c75b55 !important;
}
Run Code Online (Sandbox Code Playgroud)
这个工作得很好:当验证失败时,输入文本框标记为红色.
现在我想使用bindingHandlers代替'简单' value绑定:
<input type="text" data-bind="dateRW: myDate, validationOptions: { errorElementClass: 'input-validation-error'}" />
ko.bindingHandlers.dateRW = {
//dateRW --> the 'read-write' version used both for displaying & updating dates
init: function (element, valueAccessor, allBindingsAccessor) {
var observable = valueAccessor();
//handle the field changing
ko.utils.registerEventHandler(element, "change", function () {
var value = $(element).val();
var dateFormatted = moment.utc(value, "DD/MM/YYYY");
//if (dateFormatted.isValid())
if (dateFormatted)
observable(dateFormatted.toDate())
else
observable(null);
});
},
update: function (element, valueAccessor, allBindingsAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
var date = (typeof value !== 'undefined') ? moment.utc(value) : null;
var dateFormatted = (date != null) ? date.format('DD/MM/YYYY') : '';
$(element).val(dateFormatted);
}
};
Run Code Online (Sandbox Code Playgroud)
有了这个实现,验证工作,我的意思ko.validation.group是运作良好
var validationErrorsCount = ko.computed(function() {
if (typeof itinerary() == 'undefined') return;
var validationErrors = ko.validation.group(itinerary());
return validationErrors().length;
});
Run Code Online (Sandbox Code Playgroud)
但输入文本框不再标记为红色.似乎'validationOptions'仅适用于值绑定.
有什么方法让我的验证工作?
谢谢.
And*_*ers 13
验证框架具有值绑定的钩子,您需要调用
ko.validation.makeBindingHandlerValidatable("dateRW");
Run Code Online (Sandbox Code Playgroud)
编辑:它不是未定义的 https://jsfiddle.net/it3xl/n7aqjor9/