如果在使用Knockout時模型或視圖模型中出現數據加載

Question

將您的ajax調用放入Knockout ViewModel或將它放置在Model中是明智的嗎？我提出了一些方法，但沒有一種感覺完全正確。

方法1 - 視圖模型只有

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 - 在數據檢索模型和視圖模型隨着回調

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 - 模型和視圖模型隨着基因敲除模型

個

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); 
} 

這種方法使得虛擬機時被其他虛擬機（多屏應用）創建更有意義。此外，該方法通過使邏輯相關性的鏈強調模型視圖查看模型分離：

View => ViewModel => Model 

然而，虛擬機可以重新加載數據或進行用戶交互異步調用。例如用戶可以再次點擊加載當前時間的頁面上的按鈕。這種相互作用顯然會在現有的虛擬機內部發生。但問題與初始負載有關，我以這種方式處理。