javascript - 使用映射和 localStorage 更新 KnockoutJS viewModel 以保持持久性

Question

我需要将数据保存到 localStorage“savedData”，以便在重新访问/刷新页面时更新当前空的 View 模型，可能使用以下行中的 KO 映射插件:

ko.mapping.fromJS(this, retrievedData);

但是它当然不起作用!

function viewModel() {

    var self = this;

    self.employees = ko.observableArray([]);

    self.removeEmployee = function (employee) {
        self.employees.remove(employee);
    };

    self.addEmployee = function () {
        self.employees.push(new Employee());
    };

    self.save = function () {
        var savedData = ko.toJSON(this);
        localStorage.setItem('savedData', savedData);
        //console.log('savedData', JSON.parse(savedData))
    }

    if (localStorage && localStorage.getItem('savedData')) {
        var retrievedData = JSON.parse(localStorage.getItem('savedData'));
        ko.mapping.fromJS(this, retrievedData);
    }
}

var vm = new viewModel();
ko.applyBindings(vm);

Answer 1

问题出在 fromJS 参数中。第二个参数是映射选项，但您正在尝试传递数据。正确使用应遵循以下内容

var viewModel = ko.mapping.fromJS(retrievedData, mappingOptions);

如果您不想使用 mappingOptions 将 retreivedData 映射到 viewModel

ko.mapping.fromJS(retrievedData, {}, viewModel);

这会将您的数据转换为 viewModel，无需任何特定的映射选项。

<小时/> 注意:如果您使用两个参数调用 mapping.fromJS 和 second argument IS mapping object (__ko_mapping__ property defined)它将把第二个参数视为 viewModel 并且您可以以不同的方式使用函数:

ko.mapping.fromJS(retrievedData, viewModel);

基本上，当您不是创建 viewModel，而是更新<时，这种情况是有效的/strong> 之前使用 viewModel 与一些数据的映射创建。

<小时/>

答案:您应该通过传递空的 options 参数来正确更新代码 co 映射。当然数据应该放在第一位:

if (localStorage && localStorage.getItem('savedData')) {
    var retrievedData = JSON.parse(localStorage.getItem('savedData'));
    ko.mapping.fromJS(retrievedData, {}, self);
}