更新以显示带有建议更改的工作示例,该更改将我的 viewModel 更改为根据 Thewads 建议验证的Observable。花了很长时间才让事情顺利进行,但它现在显示了正确的错误计数!
<fieldset>
<legend>Test</legend>
<label>First name: <input data-bind='value: model.Employee.FirstName'/></label>
<label>Last name: <input data-bind='value: model.Employee.LastName'/></label>
<button type="button" data-bind='click: buttons.submit'>Submit</button>
</fieldset>
<script>
my = {namespace: { }}
my.namespace.obj = function () {
var bindingHandler = function (data) {
initializeValidation = (function () {
ko.validation.configure({
registerExtenders: true,
decorateElement: true,
messagesOnModified: true,
insertMessages: true,
parseInputAttributes: true,
messageTemplate: null,
grouping: { deep: true }
});
})();
viewModel = ko.validatedObservable({
model: ko.mapping.fromJS(data),
buttons: {
submit: function () {
if (viewModel.isValid()) {
alert('VM clean');
} else {
alert('Errors found');
viewModel.errors.showAllMessages();
}
}
}
});
extendedValidators = (function () {
viewModel().model.Employee.FirstName.extend({ minLength: 20, required: true });
viewModel().model.Employee.LastName.extend({ minLength: 30, required: true });
})();
applyBindings = (function () {
ko.applyBindings(viewModel);
})();
}
return {
fn: {
Initialize: function (model) {
bindingHandler(model);
}
}
};
};
$(document).ready(function () {
model = { "Employee": { "FirstName": "Joe", "LastName": "Shmoe" } };
my.namespace.obj().fn.Initialize(model);
});