Knockout.js 淘汰验证、映射和动态表单

Knockout.js 淘汰验证、映射和动态表单,knockout.js,knockout-mapping-plugin,knockout-validation,Knockout.js,Knockout Mapping Plugin,Knockout Validation,我花了两天的时间来寻找可能的答案,并尝试了所有的方法来看看什么是可行的。如果我忽略了什么,请原谅我。下面是一个场景 假设我导航到某个url,如/#/register/:session,此路由会触发一个JSON请求,请求用户填写字段,以便注册此会话。大概是这样的: fieldsMapping = { "include": ["fields"] } ko.mapping.fromJS(data, fieldsMapping, self.attendee.registration.registrat

我花了两天的时间来寻找可能的答案,并尝试了所有的方法来看看什么是可行的。如果我忽略了什么,请原谅我。下面是一个场景

假设我导航到某个url,如
/#/register/:session
,此路由会触发一个JSON请求,请求用户填写字段,以便注册此会话。大概是这样的:

fieldsMapping = { "include": ["fields"] }

ko.mapping.fromJS(data, fieldsMapping, self.attendee.registration.registrationFields);
"fields": [
    { "field": "firstName", "required": true, "maxSize": 128 },
    { "field": "lastName", "required": true, "maxSize": 128 },
    { "field": "email", "required": true, "maxSize": 128 }
]
function (ko, validationRules) {

    return function RegistrationForm () {

        var self = this;

        validationRules();

        self.firstName = ko.observable().extend({ required: true });
        self.lastName = ko.observable().extend({ required: true });
        self.email = ko.observable().extend({ required: true, email: true });

        self.submit = function () {
            if (self.errors().length === 0) {
                console.log("hurrah");
            } else {
                console.log("errors should be shown");
                self.errors.showAllMessages();
            }
        }

        self.errors = ko.validation.group(self);

    }

}
响应只是一个JSON对象,我将其映射到名为registrationFields()的视图模型。JSON如下所示:

fieldsMapping = { "include": ["fields"] }

ko.mapping.fromJS(data, fieldsMapping, self.attendee.registration.registrationFields);
"fields": [
    { "field": "firstName", "required": true, "maxSize": 128 },
    { "field": "lastName", "required": true, "maxSize": 128 },
    { "field": "email", "required": true, "maxSize": 128 }
]
function (ko, validationRules) {

    return function RegistrationForm () {

        var self = this;

        validationRules();

        self.firstName = ko.observable().extend({ required: true });
        self.lastName = ko.observable().extend({ required: true });
        self.email = ko.observable().extend({ required: true, email: true });

        self.submit = function () {
            if (self.errors().length === 0) {
                console.log("hurrah");
            } else {
                console.log("errors should be shown");
                self.errors.showAllMessages();
            }
        }

        self.errors = ko.validation.group(self);

    }

}
下一步是为响应中的任何字段生成HTML

<div class="registration-fields" data-bind="foreach: webapp.attendee.registration.registrationFields.fields(), registrationFieldsLayout: true">
    <label data-bind="text: message('registration.registrant.field.' + field()), attr: { for: '#' + field() }"></label>
    <!-- ko if: field() === "firstName" || field() === "lastName" -->
     <input type="text" data-bind="attr: { id: '#' + field(), value: $parent.firstName, 'data-validate': (required()) ? true : false }">
    <!-- /ko -->
    <!-- ko if: field() === "email" -->
    <input type="email" data-bind="attr: { id: '#' + field(), value: $parent.email, 'data-validate': (required()) ? true : false }">
    <!-- /ko -->
</div>
registrationForm()视图模型如下所示:

fieldsMapping = { "include": ["fields"] }

ko.mapping.fromJS(data, fieldsMapping, self.attendee.registration.registrationFields);
"fields": [
    { "field": "firstName", "required": true, "maxSize": 128 },
    { "field": "lastName", "required": true, "maxSize": 128 },
    { "field": "email", "required": true, "maxSize": 128 }
]
function (ko, validationRules) {

    return function RegistrationForm () {

        var self = this;

        validationRules();

        self.firstName = ko.observable().extend({ required: true });
        self.lastName = ko.observable().extend({ required: true });
        self.email = ko.observable().extend({ required: true, email: true });

        self.submit = function () {
            if (self.errors().length === 0) {
                console.log("hurrah");
            } else {
                console.log("errors should be shown");
                self.errors.showAllMessages();
            }
        }

        self.errors = ko.validation.group(self);

    }

}
现在,我所有的视图模型都加载了requirejs,这很好。但实际情况是,我的字段在呈现后没有附加到RegistrationForm()视图模型,因此验证不起作用

如果我把它放在一个静态字段中,验证就可以正常工作

我试过很多不同的方法,但似乎都不管用。希望有人能帮我弄清楚


谢谢。

好的。没有关系。问题就在这里:

<input type="text" data-bind="attr: { id: '#' + field(), value: $parent.firstName, 'data-validate': (required()) ? true : false }">

应该是:

<input type="text" data-bind="attr: { id: '#' + field(), 'data-validate': (required()) ? true : false }, value: $parent.firstName">


真不敢相信我错过了。好的。没有关系。问题就在这里:

<input type="text" data-bind="attr: { id: '#' + field(), value: $parent.firstName, 'data-validate': (required()) ? true : false }">

应该是:

<input type="text" data-bind="attr: { id: '#' + field(), 'data-validate': (required()) ? true : false }, value: $parent.firstName">

真不敢相信我错过了