使用 JSON 淘汰必填字段答案

【问题标题】：Knockout required field using JSON使用 JSON 淘汰必填字段
【发布时间】：2013-05-12 23:59:27
【问题描述】：

我正在使用 knockoutjs 映射插件从 JSON 构建视图模型。然后我将该模型的属性绑定到表单上的字段。问题是如何使从 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();
        }
    });
};

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

谢谢

【问题讨论】：

标签： asp.net-mvc knockout.js knockout-mapping-plugin

【解决方案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;       
}

在 ViewModel 中：

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

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

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

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

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

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

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

此链接说明如何在淘汰赛中使用自定义扩展器：Using extenders to augment observables

【讨论】：

【解决方案2】：

您需要在将数据提交到服务器之前对其进行验证。查看 Knockout 的验证插件：https://github.com/ericmbarnard/Knockout-Validation

我希望这将有助于解决问题。

【讨论】：