1

基本的に、サイトでのフォーム検証にノックアウト js を使用しています。

問題は、動的データをajaxでロードするのではなく、ページ内で送信することを好むことです（すでにhtmlでデータを送信できる場合、追加のリクエストを行う意味はありません）。

問題は、サーバーから送信されたページのコンテンツを「リバース エンジニアリング」して、ノックアウト js モデルに入力する必要があることです。私はこのようにしています（モデルはユーザーであり、ページ上のすべてのユーザーを含むhtmlテーブルがあります）：

// Handler to prepopulate my viewmodel (list of users) with data from the page
ko.bindingHandlers.populateUsersFromTable = {
    init:function (element, valueAcessor, allBindingsAccessor, viewModel) {
        var collection = valueAcessor(),
            tableRows = $(element).find("tbody > tr"),
            numberOfRows = tableRows.length,
            tableCells,
            user,
            i;

        for (i = 0; i < numberOfRows; i++) {
            tableCells = $(tableRows[i]).children("td");
            user = new User({
                name:$(tableCells).find(".user-name").text(),
                email:$(tableCells).find(".user-email").text(),
                clt_pj:$(tableCells).find(".user-clt_pj").text(),
                admin:$(tableCells).find(".user-admin").text(),
                blacklisted:$(tableCells).find(".user-blacklisted").text(),
                fired:$(tableCells).find(".user-fired").text()
            });
            collection.push(user);
        }
    }
}

// User Model/ViewModel
function User(u) {
    var self = this;
    // data
    self.name = ko.observable(u.name || '');
    self.email = ko.observable(u.email || '');
    self.clt_pj = ko.observable(u.clt_pj || '');
    self.admin = ko.observable(u.admin || false);
    self.blacklisted = ko.observable(u.blacklisted || false);
    self.fired = ko.observable(u.fired || false);

    // view
    self.selected = ko.observable(false);
}

動作しますが、コードが UI に依存しているため、良い解決策とは思えません。

これを行うためのより良いアプローチは何でしょうか?

4

1 に答える 1

3

標準的な方法は、サーバーにページ上のHTMLを入力させる代わりに、サーバーにモデルをページとともに送信されるJSONに変換させることです。JSONは非常にコンパクトな形式であるため、元のリクエストにはまだすべて含まれており、多くの場合、実際には小さくなっています（これは特に大きなselectリストに当てはまります）。

たとえば、ASP.MVCを使用している場合は、これをビューの下部に配置できます（他のサーバー技術を使用している場合は、私に知らせてください。代わりに、その例を追加します。 ）：：

var initialData = @Html.Raw(Json.Encode(Model));

次に、後でそのデータを使用してビューモデルを初期化します。これは次のようになります。

ko.applyBindings(new ViewModel(initialData));

次に、ノックアウトはバインディングを介してHTMLを処理します。

于 2012-11-22T21:18:54.337 に答える