knockout.js - 将 knockout 对象转换为纯 JavaScript 对象时的无限循环

Question

遵循 documentation 中给出的说明，我有以下 View 模型:

var newContactViewModel = function () {
    var self = this;

    self.Name = ko.observable();
    self.Address = ko.observable();
    self.City = ko.observable();
    self.State = ko.observable();
    self.PostalCode = ko.observable();

    self.Save = function () {
        $.ajax({
            type: "POST",
            url: "/contact",
            data: ko.toJS(self), //infinite loop here
            success: state.OnSaved
        });
    };
};

当 self.Save方法被调用，就会发生无限循环。 Chrome 实际上将错误报告为:

Uncaught RangeError: Maximum call stack size exceeded

如果我使用 ko.mapping.toJS(self)而不是 ko.toJS(self) ，然后我得到一个稍微有启发性的错误，但没有真正的错误“消息”:



如果我交换 ko.toJS(self)用类似 { Name: self.Name(), Address: self.Address() /* etc */ } 的东西出去，然后一切正常。似乎它正在尝试转换 Save方法并因此重新调用该方法。

KnockoutJS 中要么存在错误，要么在我使用它时出现问题。我更喜欢后者。想法？

Answer 1

我发现了代码的问题。 ko.toJS保留对象中的函数，因此它能够很好地映射它。但是，jquery 会调用数据对象上的所有函数来尝试获取值。这反过来导致无限循环。

您需要标记 Save不映射的函数。不幸的是toJS函数似乎无法做到这一点。它将保留对象的所有成员。幸运的是，映射插件允许您这样做。

要排除成员，请设置 ignore包含 'Save' 的数组的选项它会忽略 Save映射时的成员。

var data = ko.mapping.toJS(self, {
    ignore: ['Save']
});

如果您没有使用映射插件，您始终可以选择删除 Save JS 对象中的函数。

self.Save = function () {
    $.ajax({
        type: "POST",
        url: "/contact",
        data: self.ToData(),
        success: state.OnSaved
    });
};
self.ToData = function () {
    var data = ko.toJS(self);
    delete data.Save; // remove functions
    delete data.ToData;
    return data;
};

另一方面，我建议不要尝试使用 View 模型实例作为调用的数据。我会显式地创建数据对象。当然它有可能很长，但这是一种很可能总是有效的方法。

self.ToData = function () {
    return ko.toJS({
        Name: self.Name,
        Address: self.Address,
        City: self.City,
        State: self.State,
        PostalCode: self.PostalCode
    });
};