将 Knockout observableArray JSON 保存到 localStorage答案

【问题标题】：Save Knockout observableArray JSON to localStorage将 Knockout observableArray JSON 保存到 localStorage
【发布时间】：2013-11-22 01:54:32
【问题描述】：

我正在尝试使用 ko.toJSON 方法将 observableArray 保存到 localStorage。在第一页加载时，我的应用程序将从服务器接收 JSON 对象并填充 observableArray。我想将它存储在 localStorage 中以进行优化和离线使用，但是 ko.toJSON 正在返回 [] 即使其中有明确的数据。

我可以在jsFiddle 重现此问题

HTML

<span data-bind="text: locations().length"></span>
<div data-bind="foreach: locations">
    <div>
        <span data-bind="text: title"></span>
        <span> </span>
        <span data-bind="text: timeZone"></span>
    </div>
</div>
<pre data-bind="text: output"></pre>

JavaScript

var dataFromServer = [
    {name: "Cleveland", zone: "EST"},
    {name: "Chicago", zone: "CST"},
    {name: "New York", zone: "EST"}
];

var MyNS = window.MyNS || {};
MyNS.ViewModel = function () {
    var self = this;
    self.locations = ko.observableArray([]);
    self.load = function (){
        var mappedData = ko.utils.arrayMap(dataFromServer, function(item) {
            return new MyNS.Location(item.name, item.zone);
        });
        self.locations(mappedData);
    };
    self.output = ko.toJSON(self.locations());
    self.execute = function(){
        self.load();
        ko.applyBindings(self);
    };
};
MyNS.Location = function (t, z) {
    this.title = t;
    this.timeZone = z;
};
var model = new MyNS.ViewModel();
model.execute();

【问题讨论】：

标签： javascript json html knockout.js

【解决方案1】：

问题是output 变量的值只写入一次，在构造函数的第一次运行时，当位置数组为空时。要更新位置更改的输出，您可以将其转换为计算的 observable，如下所示：

self.output = ko.computed(function(){
    return ko.toJSON(self.locations())
});

更新的小提琴：http://jsfiddle.net/wvgRL/4/

【讨论】：