html - 如何使用离线存储和 Knockout.js 实现 MVVM？

Question

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

我想将 html 对象绑定到离线存储。

Answer 1

我还没有尝试过，但是knockout.localStorage GitHub 上有一个项目，这似乎是您正在寻找的。

使用该插件，您应该能够在创建 observable 时将对象作为第二个参数传递，这会将 observable 保存到 localStorage。

从文档中：

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

ko.applyBindings(viewModel);

Answer 2

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

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

Answer 3

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

他的解决方案有效！

Answer 4

我subscribe根据 KnockoutJS 的特性制定了一个解决方案。它需要一个模型并保留所有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 示例。