使用AmplifyJS存储KnockoutJS建模数据 [英] Storing KnockoutJS modeled data with AmplifyJS

问题描述

我正在尝试找到一种方法来缓存我的剔除JS SPA数据，并且我一直在尝试amplifyJS.这是我的GET函数之一:

I'm trying to figure out a way to cache my knockoutJS SPA data and I've been experimenting with amplifyJS. Here's one of my GET functions:

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

具有相同的功能，放大":

Here's the same function, "amplified":

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，removeUser和editUser函数进行额外的工作.鉴于我的应用程序中还有更多类似的功能，因此我希望尽可能避免使用多余的代码.

This works as expected, but I'm not sure about the approach I used, because it will also require extra work on the addUser, removeUser and editUser functions. And seeing as I have many more similar functions throughout my app, I'd like to avoid the extra code if possible.

我已经找到了一种在ko.extenders的帮助下处理事物的方法，就像这样:

I've found a way of handling things with the help of ko.extenders, like so:

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

然后，只要它检测到observableArray内部的更改，就使用ko.extenders.localStore函数更新本地存储数据.因此，如果存在users键的本地存储数据，则在初始化时它将写入observableArray，并且在更改时它将更新本地存储数据.

Then use the ko.extenders.localStore function to update the local storage data whenever it detects a change inside the observableArray. So on init it will write to the observableArray in case local storage data exists for users key and on changes it will update the local storage data.

这种方法的问题是我需要在模型中运行数据，而localStore函数却找不到方法，该函数保存在单独的页面上.

My problem with this approach is that I need to run my data through the model and I couldn't find a way to do that from the localStore function, which is kept on a separate page.

你们中有人与KO和Amplify合作吗?您使用什么方法?我应该使用第一个扩展程序还是尝试两者结合使用，并以仅更新本地存储而不在初始化时写入observableArray的方式重写扩展器?

Has any of you worked with KO and Amplify? What approach did you use? Should I use the first one or try a combination of the two and rewrite the extender in a way that it only updates the local storage without writing to the observableArray on init?

推荐答案

在问题注释中进行讨论之后，我建议使用本机HTTP缓存，而不是通过以下方式在客户端上添加另一个缓存层一个额外的库.

Following the discussion in the question's comments, I suggested to use native HTTP caching instead of adding another caching layer on the client by means of an extra library.

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

This would require implementing a conditional request scheme.

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

Such a scheme relies on freshness information in the Ajax response headers via the Last-Modified (or E-Tag) HTTP headers and other headers that influence browser caching (like Cache-Control: with its various options).

• 随后随后请求相同资源(URL)时，浏览器将If-Modified-Since(或If-None-Match)标头透明地发送到服务器.

• The browser transparently sends an If-Modified-Since (or If-None-Match) header to the server when the same resource (URL) is requested subsequently.

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

The server can respond with HTTP 304 Not Modified if the client's information is still up-to-date. This can be a lot faster than re-creating a full response from scratch.

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

From the Ajax request's point of view (jQuery or otherwise) a response works the same way, no matter if it actually came from the server or if it came from the browser's cache, the latter is only a lot faster.

为此，必须谨慎地调整服务器端，另一方面，客户端不需要太多更改.

Carefully adapting the server side is necessary for this, the client side on the other hand does not need much change.

实现条件请求的好处是减少了服务器的负载并提高了客户端的响应速度.

The benefit of implementing conditional requests is reduced load on the server and faster response behavior on the client.

Knockout的专业可以进一步改善这一点:

A specialty of Knockout to improve this even further:

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

If you happen to use the mapping plugin to map raw server data to a complex view model, you can define - as part of the options that control the mapping process - a key function. Its purpose is to match parts of your view model against parts of the source data.

这样，已经映射过的数据部分将不再被映射，其余部分将被更新.这可以帮助减少客户端对其已经拥有的数据的处理时间，并有可能避免不必要的屏幕更新.

This way parts of the data that already have been mapped will not be mapped again, the others are updated. That can help reduce the client's processing time for data it already has and, potentially, unnecessary screen updates as well.

这篇关于使用AmplifyJS存储KnockoutJS建模数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！