3

我正在使用 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();
        }
    });
};

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

谢谢

4

2 回答 2

2

不久前我遇到了类似的问题，这就是我解决它的方法：

添加自定义扩展器

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;       
}

在视图模型中：

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

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(....);

此链接解释了如何在淘汰赛中使用自定义扩展器：使用扩展器来增强可观察对象

于 2013-05-17T21:25:36.880 回答
1

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

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

于 2013-05-17T19:07:38.830 回答