如何实现具有脱机存储和Knockout.js的MVVM？

Question

我可以用Knockout.js实现Mvvm。但我想用跨浏览器（FF和Chrome）支持Html 5离线存储。

我想将html对象绑定到脱机存储。

Answer 1

http://craigcav.wordpress.com/2012/05/16/simple-client-storage-for-view-models-with-amplifyjs-and-knockout/

他的解决方案的工作！

Answer 2

我还没有尝试过，但有一个knockout.localStorageproject on GitHub，这似乎是你在找什么。

使用该插件时，您应该能够传递一个对象作为第二个参数，当您创建您的observable时，它将observable保存到localStorage中。

从文档：

var viewModel = { 
    name: ko.observable('James', {persist: 'name'}) 
} 

ko.applyBindings(viewModel); 

Answer 3

可以使用库诸如可以序列对象localStorage的（跨浏览器）amplify.js。它也回落到旧版浏览器的旧版存储工具中。首先，将可观察对象解包为JSON对象，然后使用amplify.store序列化对象并存储它。然后，您可以将其拉出并在您想要取回时将其映射回可观察对象。

http://amplifyjs.com/api/store/

Answer 4

我根据KnockoutJS的subscribe功能制定了解决方案。它需要一个模型并坚持所有的observable属性。

ko.persistChanges = function (vm, prefix) { 

    if (prefix === undefined) { 
     prefix = ''; 
    } 

    for (var n in vm) { 

     var observable = vm[n]; 
     var key = prefix + n; 

     if (ko.isObservable(observable) && !ko.isComputed(observable)) { 

      //track change of observable 
      ko.trackChange(observable, key); 

      //force load 
      observable(); 
     } 
    } 
}; 

检查http://keestalkstech.com/2014/02/automatic-knockout-model-persistence-offline-with-amplify/代码和JSFiddle示例。