4

ajax呼び出しをKnockoutViewModelに配置するのが賢明ですか、それとも代わりにモデルに配置する必要がありますか？私はいくつかのアプローチを考え出しましたが、どれも完全に正しいとは感じていません。

アプローチ1-ViewModelのみ

window.someDataVM = function() {
   var self = this;

    //used to enable loading indicator
    self.pendingLoad = ko.observable(true);

    self.myData = ko.observableArray();

    self.load = function() {
        //make ajax call and populate myData observable array
    }     
}

利点

  • 最も単純なコード構造-保守が容易

短所

  • データ取得のための再利用なし

アプローチ2-コールバックを使用したモデルとViewModel

   window.someDataVM = function() {
       var self = this;

        //used to enable loading indicator
        self.pendingLoad = ko.observable(true);

        self.myData = ko.observableArray();

        self.load = function() {            
            someDataM.load(function(data) {
                //populate myData observable array
            });
        }     
    }

    window.someDataM = function() {
       return {               
          load: function(callback) {
             //get data via ajax and return via callback
          }
       }
    }

利点

  • データ取得でのコードの再利用の増加（つまり、someDataをロードするための1つの場所）

  • 3に近づくよりシンプルなインターフェース

短所

  • コールバックを使用します

アプローチ3-ノックアウトモデルを使用したモデルとビューモデル

window.someDataVM = function() {
       var self = this;

        //used to enable loading indicator
        self.pendingLoad = ko.observable(true);

        self.myData = ko.observableArray();

        self.load = function() {
            someDataM.load();
        }

        someDataM.isLoaded.subscribe(function(isLoaded) {
            if (isLoaded)  {
               //populate observable array
            }
        });     
}



window.someDataM = function() {
     return {
          isLoaded: ko.observable(false);
          items: [],
          load: function() {
             //get some data, populate items, set isLoaded
          }
     }
    }();

利点

  • コールバックを使用しません
  • データコードを一元化する

短所

  • 多数のデータ入力ポイント（つまり、LoadById、LoadByNameなど）があると複雑になります
4

1 に答える 1

3

個人的には、VMの自己読み込みに慣れていません。したがって、最初にデータ（モデル）をロードしてから、VMに渡すことをお勧めします。

概念的には、次のようになります。

function loadData() {
    //load data, can be asynchronously. Then callback
    callback(data);
}

function callback(data) {
    var vm = new someDataVM(data);
    //do something with VM.
    ko.applyBindings(vm);
}

この種のアプローチは、VMが他のVM（マルチスクリーンアプリケーション）によって作成される場合にさらに意味があります。また、このアプローチでは、論理的な依存関係のチェーンを作成することにより、model-view-viewModelの分離に重点を置いています。

View => ViewModel => Model

ただし、VMはデータを再ロードしたり、ユーザーの操作で非同期呼び出しを行ったりすることができます。たとえば、ユーザーは現在の時刻を再度読み込むページ上のボタンをクリックできます。これらの種類の相互作用は、明らかに既存のVM内で発生します。しかし、質問は私がこのようにアプローチする初期負荷に関連していました。

于 2012-11-05T20:13:40.200 に答える