asp.net-mvc - 使用 JSON knockout 必填字段

Question

我正在使用 knockoutjs 映射插件从 JSON 构建 View 模型。然后我将该模型的属性绑定(bind)到我的表单上的字段。问题是如何使从 JSON 生成的模型中的字段成为必需字段？

例如，如果我像这样加载 JSON:

$.getJSON('/Department/GetEmptyModel/', function (data) {
    var mapped = ko.mapping.fromJS(data);
    self.AddDepartmentModel(mapped);
});

然后像这样保存:

self.AddDepartmentModel.AddDepartment = function () {
    $.ajax({
        url: "/Department/Add/",
        type: 'post',
        data: ko.toJSON(self.AddDepartmentModel),
        contentType: 'application/json',
        success: function (result) {
            self.ListOfDepartments.GetListOfAllDepartments();
        }
    });
};

如何确保在保存之前所有必填字段都已存在？

谢谢

Answer 1

我之前遇到过类似的问题，我是这样解决的:

添加自定义扩展器

ko.extenders.spaceNotAllowed = function(target, options){
    target.hasError = ko.observable();
    target.validationMessage = ko.observable();
    var validate = function(newValue) {  // Validation for a field that shouldnt contain spaces
        if(value.indexOf(" ") === -1) target.hasError(false);
        else {
            target.hasError(true);
            target.validationMessage(target.hasError() ? options.errorMessage || "No spaces allowed" : "");
        }
    }
    validate(target());
    target.subscribe(validate);
    return target;       
}

在 View 模型中:

在我的 View 模型中对需要验证的字段使用扩展器

var ViewModel = {
    var self = this;
    self.noSpaces = ko.observable('initialValue').extend({spaceNotAllowed: {errorMessage: 'no spaces allowed'}});
}

选项 1 现在，如果您的 html 页面上有一个提交按钮，您可以像这样对其进行数据绑定(bind):

<button type='button' data-bind='click: saveStuff, enable: !noSpaces.hasError'>Save</button>

这样，只有在验证通过时才会启用“保存按钮”。不久前，当我遇到同样的问题并且我对 knockout 还很陌生时，我找到了这个答案。

选项 2 在 AJAX 之前检查字段是否有效:

if(self.noSpaces.hasError) {
    // Do something here
    return;
}
$.ajax(....);

此链接解释了如何在 knockout 中使用自定义扩展器:Using extenders to augment observables