2

次のコードで監視可能な配列をバインドするために、ノックアウトから.net WebAPIへの3つの別々のgetリクエストを実行するための最良の方法を誰かに教えてもらえますか？Firebugはロード時間を数ミリ秒と表示しますが、実際には数秒かかります。

javascript asyncを見る前に、いくつかのガイダンスを得たいと思っていました。

   $(function () { 
        var model = new viewModel();
        model.todayTimes([]); 
        model.zones([]);
        model.dayTypes([]);

        $.get('../api/Zone', function (data) {
        model.zones(data);

        });

         $.get('../api/DayType', function (data) {
        model.dayTypes(data);

        });

        $.get('../api/TemplateTime/?dayTypeId='+model.dayType(), function (data) { 
            model.todayTimes(data); 
            ko.applyBindings(model); 
        });

編集

function viewModel() {
        var self = this;
        self.dayType = ko.observable(1);
         self.todayTimes = ko.observableArray([]);
         self.dayTypes = ko.observableArray([]);
         self.zones = ko.observableArray([]);

//other code

  $.getJSON("/api/Zone", function(data) {
    self.zones(data);


    $.getJSON("/api/DayType", function(data) {
    self.dayTypes(data);
    }); 

       $.getJSON('../api/TemplateTime/?dayTypeId=1', function (data) { 
            self.todayTimes(data); 
        }); 

}
  $(function () { 
        ko.applyBindings(new viewModel());           
      });
4

2 に答える 2

2

したがって、ページの読み込み時に3つの個別のajaxリクエストを行うのは非常に無駄なので、3回の呼び出しが必要かどうかを尋ねることから始めます。これを行うには、ほぼ間違いなくより良い方法があります。また、これは1回限りの取得ですか、それとも再利用可能である必要がありますか？

それが一度だけの場合、なぜそれが起こっているのか疑問に思う必要があります。このデータはサーバーによって収集され、最初のページ要求とともに送信される必要があります。これが最適なパスです。これがどのように行われるかはサーバースタックによって異なりますが、それらはすべてJSONへのモデルシリアル化をサポートしており、構築中にビューモデルに直接ダンプできます。

再利用可能にする必要がある場合（これがこれらのajaxリクエストを行う唯一の理由です）、本当に3つの別々の呼び出しである必要がありますか？それらは関連しているように見え、すべてのデータが一度に要求される可能性があります。これを再利用可能なものに組み合わせると、次のようになります。

var ViewModel = function(initialData) {
    var self = this;
    self.dayType = ko.observable(initialData.dayType || []);
    self.todayTimes = ko.observableArray(initialData.todayTimes || []);
    self.dayTypes = ko.observableArray(initialData.dayTypes || []);
    self.zones = ko.observableArray(initialData.zones || []);

    self.getData = function() {
        $.getJSON("/api/timeInfo", function(data) {
            self.todayTimes(data.todayTimes || self.todayTimes()));
            self.dayTypes(data.dayTypes || self.dayTypes()));
            self.zones(data.zones || self.zones()));
        };
    };
};

本当に3つの別々の呼び出しである必要がある場合は、分割できますが、これも、本当に独立した呼び出しgetDataである場合にのみ行ってください。それらを分割する場合、ビューモデルでそれらを機能させるパターンに従います。これにより、それらを外部から呼び出して、ビューにバインドすることができます。再利用可能。

于 2012-07-31T23:55:08.253 に答える
0

レイテンシの問題を克服するには、3つのリクエストを1つの「ラッパーAPI呼び出し」にパックする必要があるという@Tyrsiusに同意します。

インラインデータ/ajaxリクエストデータの両方でさらに再利用できるように、上記のビューモデルを詳しく説明することを提案します。

function ViewModel(initialData) {
  // setup properties
  this.dayType = ko.observable();
  this.todayTimes = ko.observable();
  this.dayTypes = ko.observable();
  this.zones = ko.observable();

  if (initialData) {
    this.update(initialData);
  }
}

ViewModel.prototype.update = function(data) {
  data.todayTimes && this.todayTimes(data.todayTimes);
  data.dayTypes && this.dayTypes(data.dayTypes);
  data.zones && this.zones(data.zones);
};

ViewModel.prototype.load = function() {
  $.getJSON('/api/timeInfo', this.update.bind(this));
};

とにかく、残念なことに、ラッパーAPIエンドポイントを作成することはできませんが、必要なすべてのデータが読み込まれたときにUIを更新したい場合は、非同期サポートを使用するしかありません。

jQueryは遅延オブジェクトAPIを提供しますが、問題を解決するように思われる並列タスクAPIを提供するAsyncライブラリもあります。

于 2015-01-06T18:53:19.700 に答える