1

私は 2 日間かけて考えられる答えを調べ、何がうまくいくかを確かめるためにあらゆることを試しました。ですから、見落としがありましたらご容赦ください。これがシナリオです。

次のような URL に移動する/#/register/:sessionと、このルートが、このセッションに登録するためにユーザーに入力してもらいたいフィールドに対する JSON 要求を発行するとします。このようなもの：

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

ko.mapping.fromJS(data, fieldsMapping, self.attendee.registration.registrationFields);

応答は、registrationFields() というビュー モデルにマップする単なる JSON オブジェクトです。JSON は次のようになります。

"fields": [
    { "field": "firstName", "required": true, "maxSize": 128 },
    { "field": "lastName", "required": true, "maxSize": 128 },
    { "field": "email", "required": true, "maxSize": 128 }
]

次のステップは、応答に含まれるすべてのフィールドの 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>

$parent変数には、RegistrationForm() というフォーム データを保存する別のビュー モデルをアタッチしています。フォームタグでこれを行います：

<form method="post" data-bind="with: webapp.attendee.registration.registrationForm">

registrationForm() ビュー モデルは次のようになります。

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() ビュー モデルにアタッチされていないため、検証が機能しません。

静的フィールドを入れると、検証は問題なく機能します。

いろいろ試してみましたが、何もうまくいかないようです。誰かが光を当てるのを手伝ってくれることを願っています。

ありがとう。

4

1 に答える 1

1

Ok。どうでも。問題はここにありました：

<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">

私がそれを逃したなんて信じられない。

于 2013-01-10T21:16:47.403 に答える