3

表形式のデータを含む Web ページがあります。現在、Knockout.js バインディングを使用しています。

ページが読み込まれると、データを取得してバインドするために AJAX 呼び出しを行います。基本的に、ページが最初に表示され、ユーザーが「読み込み中...」というajaxメッセージを受け取り、データが送信されます。ページの読み込みは高速ですが、ブラウザはサーバーに対して 2 つの呼び出しを行う必要があるため、これは便利です (1 つはページ用、もう 1 つはデータ用)。

ユーザーがデータを更新したい場合、それも同じようにうまく機能します。

ページと一緒に ViewModel データをロードする方法を教えてください。サーバーへの二重トリップを回避する方法はありますか? 最初のページの読み込み時に何らかの方法で JSON を含め、それを操作して AJAX を使用して更新したいと考えています。

編集：

私はそれを機能させましたが、私がやった方法に落とし穴があるかどうかはわかりません:

HTML:

<div id="initialData" style="display: none;"><asp:Literal ID="initialDataLiteral" runat="server" EnableViewState="False"/></div>

サーバーコード:

// Prepare initial data for page
            var memoryStream = new MemoryStream();
            var serializer = new DataContractJsonSerializer(typeof(DataEnvelope));
            serializer.WriteObject(memoryStream, GetShipments(DateTime.Now.Date.AddMonths(-2).ToShortDateString(), DateTime.Now.Date.ToShortDateString()));
            memoryStream.Position = 0;
            var streamreader = new StreamReader(memoryStream);
            this.initialDataLiteral.Text = streamreader.ReadToEnd();

Knockout 側では簡単です。文字列を取り出し、JSON に変換してそれを使用するだけです..

// Page comes with preloaded data. Let's set VM properties
        var initialData = $.parseJSON($("#initialData").text());
        vm.tripData(ko.utils.arrayMap(initialData.Shipments, function (i) { return new shipment(i); }));

後でユーザーが更新すると、AJAX 呼び出しを介して同じデータが取得されます。このように持っていることの欠点はありますか？明らかに、ソースを表示すると、JSON の「もの」がたくさん提供されます。私はまだページがよりコンパクトで、完全な ajax の読み込みと比較して最初の読み込みが速いと思います..

4

1 に答える 1

1

使用しているサーバー側のテクノロジを指定しませんでしたが、少なくとも質問にasp.net. これは私が ASP.NET MVC で使用するパターンなので、Web フォームを使用している場合は調整が必要になる場合があります。

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

var MyViewModel = function (data) {
    var model = ko.mapping.fromJS(data);

    // any additional observables, computeds, methods, etc., i.e.
    // model.SomethingNotOnModel = ko.computed();

    return model;
};

var viewModel = MyViewModel(modelData);
ko.applyBindings(viewModel);

Knockout のマッピング プラグインは、供給されたデータ オブジェクトに存在するすべてのプロパティに対して自動的にオブザーバブルを作成するため、変更する必要がない限り、それらを手動で指定する必要はありません。

アップデート

@Rich のコメントに基づいて、これを実際にどのように使用する必要があるかをもう少し明確に表示する必要があると感じました。

ページ内

<script>
    $(document).ready(function () {    
        var modelData = @Html.Raw(Json.Encode(Model));
        MyApp.MyView.Init(modelData);
    });
</script>

外部JS

MyApp = MyApp || {};

MyApp.MyView = function () {
    var _init = function (data) {
        var viewModel = MyApp.MyView.MyViewModel(data);
        ko.applyBindings(viewModel);
        // anything else that should happen on page load
    };

    return {
        Init: _init
    };
}();

MyApp.MyView.MyViewModel = function (data) {
    var model = ko.mapping.fromJS(data);

    // any additional observables, computeds, methods, etc., i.e.
    // model.SomethingNotOnModel = ko.computed();

    return model;
};
于 2013-04-18T18:18:53.417 に答える