1

フォーム フィールドに検証メッセージを自動的に表示するメカニズムを構築しており、これについて議論したいと考えています。

エラーメッセージとそれぞれのプロパティを含む監視可能な配列があります。

監視可能な配列の要素をそれぞれのフォーム フィールドにバインドするにはどうすればよいですか?

オブザーバブルには次のデータがあります（つまり）：

messages = ko.observableArray();
- Property: Reference, Message: Already exists a product with this reference.
- Property: Name, Message: The product's name is mandatory.
- Property: Bar Code, Message: The Bars Code does not matches the EAN13 format.
- ...

私のフォーム フィールドの ID には、配列内のプロパティと同じ名前があります。

        <div class="s13">
            <label for="Reference">Reference</label>
            <input class="text-box single-line" id="Reference" name="Reference" type="text" value="" data-bind="value: selected().Reference" />
            <span id="vReference"></span>
        </div>

        <div class="s13">
            <label for="Name">Name</label>
            <input class="text-box single-line" id="Name" name="Name" type="text" value="" data-bind="value: selected().Name" />
            <span id="vName"></span>
        </div>

        <div class="s13">
            <label for="BarCode">Bars Code (EAN13)</label>
            <input class="text-box single-line" id="BarCode" name="BarCode" type="text" value="" data-bind="value: selected().BarCode" />
            <span id="vBarCode"></span>
        </div>

私はKnockout.jsを初めて使用しますが、スパンごとにそれぞれのメッセージを返す「計算されたオブザーバブル」を使用する必要があると思います。

あなたが言うこと？

/// アップデート ////////////////////////////////////////////// //////

製品ビュー モデル:

function mainmodel(baseUri) {

var m = this;
    m.baseUri = baseUri;

/// PRODUCTS VIEW MODEL ******************************************* *

    m.products = new function () {

        var p = this;
            p.baseUri = baseUri;
            p.items = ko.observableArray();
            p.selected = ko.observable();
            p.messages = ko.observableArray([]);

製品の読み込み

        /// LIST
            p.list = function () {
                $.getJSON(p.baseUri + "/list" + "?page=" + p.currentpage(), p.items);
            }

製品の作成 (検証メッセージが読み込まれる場所)

        /// CREATE
            p.create = function (formElement) {
                //$.post(p.baseUri + "/create", $(formElement).serialize(), null, "json")
                $.ajax({
                    type: 'POST',
                    url: p.baseUri + "/create",
                    data: $(formElement).serialize(),
                    success: null,
                    dataType: "json",
                    statusCode: {
                        400: function (o) {
                            p.messages($.parseJSON(o.responseText));
                        }
                    }
                });
            }

これを実行すると、p.messagesには製品の各プロパティの検証メッセージが含まれます。

4

1 に答える 1

0

これに使用できるアプローチがいくつかあると思います。これらの検証メッセージをサーバーへのリクエストから受け取っている場合は、それらをループして、結果に基づいてオブザーバブルを直接入力できます。

これを行う良い方法は、次のような検証メッセージを保持する「サブ」オブザーバブルを作成することです。

this.myObservable = ko.observable();
this.myObservable.validationMessage = ko.observable();

と に対してバインドできるようにmyObservableなりmyObservable.validationMessageました。

したがって、メッセージの配列を受け取った場合は、それらをループして、次のようなメッセージを適用できます。

        var messages = [
            { Property: "Reference", Message: "Can't find a reference to this reference" },
            { Property: "Name", Message: "Pick a better name" },
            { Property: "BarCode", Message: "Not a valid code" }
        ];

        //apply messages to each observable
        ko.utils.arrayForEach(messages, function(message) {
            if (ko.isObservable(self[message.Property])) {
               self[message.Property].error(message.Message);  
            }
        });

アプリケーション フローはわかりませんが、最初にエラーをクリアすることをお勧めします。

サンプルは次のとおりです: http://jsfiddle.net/rniemeyer/mk2Ed/

計算されたオブザーバブルを使用する別の方法を次に示します (最初の方が少し効率的です): http://jsfiddle.net/rniemeyer/R6mL8/

于 2012-11-22T15:48:12.030 に答える