2014-07-09 56 views
1

我想弄清楚一種方法來緩存我的knockoutJS SPA數據,我一直在用amplifyJS進行試驗。下面是我的GET功能之一:用AmplifyJS存儲KnockoutJS建模數據

UserController.prototype.getUsers = function() { 
    var self = this; 

    return $.ajax({ 
     type: 'GET', 
     url: self.Config.api + 'users' 
    }).done(function(data) { 
     self.usersArr(ko.utils.arrayMap(data.users, function(item) { 
     // run each item through model 
     return new self.Model.User(item); 
     }));   
    }).fail(function(data) { 
     // failed 
    }); 
}; 

這是同樣的功能,「放大」:

UserController.prototype.getUsers = function() { 
    var self = this; 

    if (amplify.store('users')) { 
     self.usersArr(ko.utils.arrayMap(amplify.store('users'), function(item) { 
     // run each item through model 
     return new self.Model.User(item); 
     })); 
    } else { 
    return $.ajax({ 
     type: 'GET', 
     url: self.Config.api + 'users' 
    }).done(function(data) { 
     self.usersArr(ko.utils.arrayMap(data.users, function(item) { 
      // run each item through model 
      return new self.Model.User(item); 
     }));   
    }).fail(function(data) { 
     // failed 
    }); 
}; 

可正常工作,但我不知道我所使用的方法,因爲它會還需要對addUserremoveUsereditUser功能進行額外的工作。看到我的應用程序中有更多類似的功能,如果可能的話,我想避免使用額外的代碼。

我發現處理事情的ko.extenders的幫助下,像這樣的方式:

this.usersArr = ko.observableArray().extend({ localStore: 'users' }); 

然後使用ko.extenders.localStore功能更新本地存儲數據時,它檢測到observableArray內的變化。所以在初始化時,它將寫入observableArray以防本地存儲數據存在users密鑰,並在更改時更新本地存儲數據。

這種方法的問題是我需要通過模型運行我的數據,而且我無法找到一種方法來執行localStore函數,該函數保存在單獨的頁面上。

有沒有人與KO和Amplify合作過?你用什麼方法?我應該使用第一個還是嘗試兩者的組合,並重寫擴展器,使其只更新本地存儲,而不在init上寫入observableArray

+0

因此......你想要一個持久的緩存層,它不僅能保存服務器數據,而且還能反映用戶的變化。 – Tomalak

+0

是的,用戶更改也需要反映,以便在更新原始對象後刷新頁面或在另一個視圖上請求相同的信息。 – Norbert

+0

您不打算構建可以完全脫機使用的東西,對嗎? – Tomalak

回答

1

繼問題評論中的討論後,我建議使用本機HTTP緩存,而不是通過額外的庫在客戶端上添加另一個緩存層。

這將需要實施條件請求方案。

這樣的方案依賴於經由Last-Modified(或E-Tag)在Ajax響應標頭信息的新鮮度的HTTP標頭以及影響瀏覽器緩存(例如Cache-Control:與各種選項)其它標題。

  • 當隨後請求的相同的資源(URL)的瀏覽器透明地發送If-Modified-Since(或If-None-Match)報頭到服務器。

  • 如果客戶端的信息仍然是最新的,服務器可以用HTTP 304 Not Modified進行響應。這比從零開始重新創建完整響應要快得多。

  • 從Ajax請求的角度來看(jQuery或其他),響應的工作方式是一樣的,不管它是從服務器實際發出還是從瀏覽器的緩存中獲得,後者只會快很多。

仔細調整服務器端是必要的,另一方面,客戶端不需要太多的改變。

實現條件請求的好處是減少服務器上的負載和客戶端上更快的響應行爲。

淘汰賽的特產,以進一步改善這一點:

如果你碰巧使用了mapping plugin原始服務器數據映射到一個複雜的視圖模型,你可以定義 - 作爲控制映射過程中的選項部分 - 一個key功能。其目的是將部分視圖模型與部分源數據進行匹配。

這樣,已經映射的數據部分將不會再次映射,其他部分將被更新。這可以幫助減少客戶現有數據的處理時間,並且可能會減少不必要的屏幕更新。