1

我正在尝试找出一种方法来缓存我的 knockoutJS SPA 数据,并且我一直在尝试使用 amplifyJS。这是我的 GET 函数之一:

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

这可以按预期工作,但我不确定我使用的方法,因为它还需要对addUser,removeUsereditUser函数进行额外的工作。并且看到我在整个应用程序中有更多类似的功能,如果可能的话,我想避免额外的代码。

我找到了一种在 的帮助下处理事情的方法ko.extenders,如下所示:

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

然后,ko.extenders.localStore只要检测到observableArray. 因此,在初始化时它将写入observableArray以防密钥存在本地存储数据,users并且在更改时它将更新本地存储数据。

我对这种方法的问题是我需要通过模型运行我的数据,而我找不到从localStore函数中执行此操作的方法,该函数保存在单独的页面上。

你们中有人与 KO 和 Amplify 合作过吗?你用了什么方法?我应该使用第一个还是尝试两者的组合并重写扩展器,使其仅更新本地存储而不写入observableArrayon init?

4

1 回答 1

1

根据问题评论中的讨论,我建议使用本机 HTTP 缓存,而不是通过额外的库在客户端上添加另一个缓存层。

这将需要实施条件请求方案。

这种方案依赖于 Ajax 响应标头中的新鲜度信息,这些信息通过Last-Modified(或E-Tag)HTTP 标头和其他影响浏览器缓存的标头(例如Cache-Control:其各种选项)。

  • 当随后请求相同的资源(URL)时,浏览器会透明地向服务器发送If-Modified-Since(或)标头。If-None-Match

  • 304 Not Modified如果客户端的信息仍然是最新的,则服务器可以使用 HTTP 进行响应。这比从头开始重新创建完整响应要快得多。

  • 从 Ajax 请求的角度(jQuery 或其他)来看,响应的工作方式相同,无论它实际上来自服务器还是来自浏览器的缓存,后者只会快很多。

为此需要仔细调整服务器端,另一方面,客户端不需要太多更改。

实现条件请求的好处是减少了服务器上的负载和更快的客户端响应行为。

Knockout 的一个特长可以进一步改善这一点:

如果您碰巧使用映射插件将原始服务器数据映射到复杂的视图模型,您可以定义 - 作为控制映射过程的选项的一部分 - 一个key函数。其目的是将部分视图模型与部分源数据进行匹配。

这样,已经映射的部分数据将不会再次映射,其他部分会更新。这可以帮助减少客户端处理已有数据的时间,并可能减少不必要的屏幕更新。

于 2014-07-10T16:01:47.847 回答