淘汰视图模型：将其保存在 localStorage 并检索它答案

【问题标题】：knockout viewModel: save it on localStrorage and retrive it淘汰视图模型：将其保存在 localStorage 并检索它
【发布时间】：2015-04-02 07:41:43
【问题描述】：

根据从 Web 服务获取的一些数据，我使用敲除在页面中执行各种操作。用户可以在之后选择某些东西并通过一些选择输入来操作数据，这会影响淘汰赛的 viewModel。

当用户完成更改后，它会继续下一个表单（带有 POST），这是另一个网页。

我想做的是在它离开页面之前将当前视图模型存储在 localStorage 中，如果他/她按下，从 localStorage 加载视图模型。

所以在用户离开页面之前在我的 viewModel 中我会这样做：

localStorage.setItem("vM", JSON.stringify(self));

然后在我的第一页中：

var viewModel; viewModel = JSON.parse(localStorage.getItem("vM"));

if(viewModel == undefined || viewModel == null)  viewModel = new vM();

ko.applyBindings(viewModel);

但是从 json 解析出来的 viewModel 并不是一个有效的淘汰模型。有没有办法做到这一点？

谢谢

【问题讨论】：

您必须为您的视图模型创建一个自定义构造函数，该构造函数知道如何从 JSON 构建它，或者如果您的视图模型很简单，您可以使用 mapping plugin。

标签： knockout.js

【解决方案1】：

当敲除 viewModel 被字符串化时，由于 observable，它不会完全序列化，因此不能直接反序列化回有效的 viewModel。

最好的方法是使用ko.json 函数将您的视图模型转换为具有所有当前值的普通对象版本。将其保存在 localStorage 中。

然后你必须像往常一样初始化你的 viewModel，并在创建 observables 时插入从你的 localStorage 检索到的对象中的值。

更多细节可以在文档中找到： http://knockoutjs.com/documentation/json-data.html

【讨论】：

我试过了。但是我再次无法将绑定应用到这个缓存模型。我相信，因为它是可观察的权利？那么有没有办法保存/检索功能齐全的淘汰视图模型？
我不这么认为。您必须将缓存对象中的值转换为 viewModel 的可观察对象，然后像往常一样绑定到它。缓存的对象不会重新创建 observable 结构。

【解决方案2】：

尝试使用knockout.mapping插件。

在保存到localStorage 电话之前：

var unmapped = ko.mapping.toJS(viewModel);

使用来自localStorage 的数据更新模型

ko.mapping.fromJS(data, viewModel);

【讨论】：

如果您有嵌套的可观察对象（可观察数组中的可观察对象），这将不起作用。