将淘汰对象转换为纯 JavaScript 对象时出现无限循环

遵循中给出的说明文档 http://knockoutjs.com/documentation/json-data.html，我有以下视图模型：

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 实际上将错误报告为：

未捕获的范围错误：超出最大调用堆栈大小

如果我使用ko.mapping.toJS(self)代替ko.toJS(self)，然后我得到一个稍微更明显的错误，但没有真正的错误“消息”：

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

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

我发现了代码的问题。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;
};

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

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