使用Knockout時，是否應在模型或視圖模型中發生數據加載

Question

將你的ajax調用放在你的Knockout ViewModel中或者它應該放在模型中是明智的嗎？ 我想出了一些方法，但沒有一個感覺完全正確。

方法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）

• 接近3的更簡單的接口

缺點

• 使用回調

方法3 - 具有Knockout模型的模型和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();
        }

        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等等）

Answer 1

我個人對自加載虛擬機感到不舒服。 因此，我建議首先加載數據（模型），然后將其傳遞給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（多屏幕應用程序）創建時，這種方法更有意義。 此外，這種方法通過建立邏輯依賴鏈來強調模型 - 視圖 - 視圖模型分離：

View => ViewModel => Model

但是，VM可以重新加載數據或對用戶交互進行異步調用。 例如，用戶可以點擊頁面上再次加載當前時間的按鈕。 這些類型的交互顯然會發生在現有的vm內部。 但問題與初始負載有關，我采用這種方式。