将嵌套的淘汰视图模型解析为 JSON 的问题

Question

问题

在我工作和探索 knockoutjs 的过程中，我陷入了困境。我想将视图模型（和底层视图模型）序列化为 JSON。这将导致无限循环，因为子视图模型具有引用父视图模型的属性。解决此问题的最佳做法是什么？

代码

var Partner = function (parent) {
    var self = this;
    self.parent = parent;
    self.name = ko.observable('');
}

var ProjectViewModel = function () {
    var self = this;
    self.nr = ko.observable(0);
    self.tite = ko.observable('');
    self.partners = ko.observableArray();            

    self.addPartner = function () { self.partners.push(new Partner(self)) };
    self.removePartner = function (c) { self.partners.remove(c) };
};
var vm = new ProjectViewModel();
ko.applyBindings(vm);


$("#button").click(function () {
    alert(ko.toJSON(vm));
}

到目前为止我尝试了什么

我尝试在合作伙伴视图模型中添加以下方法：

Partner.prototype.toJSON = function () {
            var copy = ko.toJS(self);
            delete copy.parent;
            return copy;
        }

这仅适用于一个合作伙伴，如果 ProjectViewModel 有多个合作伙伴，则每个合作伙伴都将具有与最后一个合作伙伴相同的值。仅当我想将其序列化为 JSON 时才会发生这种情况。

Answer 1

有几种方法可以处理这种情况。 KO 的ko.toJS 部分可以正确处理此问题。最终是JSON.stringify（在ko.toJSON 中调用ko.toJS 导致错误。

您的原型上的toJSON 方法非常接近，只是您希望处理this 而不是self。

所以，它看起来像：

Partner.prototype.toJSON = function() {
  var copy = ko.toJS(this);
  delete copy.parent;
  return copy; 
};

其他处理方式：

1- 实际上并不将您的父对象存储在子对象上，而是直接根据传递给构造函数的参数在任何处理程序中引用它。

var Partner = function (parent) {
    var self = this;
    self.name = ko.observable(name);

    self.doSomething = function() {
        //can use "parent" directly here without storing it anywhere
    };
};

2-“隐藏”你的父母参考

var Partner = function (parent) {
    var self = this;
    self.meta = function() {};
    self.meta.parent = parent;
    self.name = ko.observable(name);    
};

您可以将 parent 值放在函数后面（可以作为可观察对象的子属性）。当你的结构被ko.toJS 转换成一个普通的 JS 对象时，函数的所有子属性都会丢失。

3- 更改应用程序的结构，具体取决于您想要做什么。假设父母想在孩子改名时做出反应。你可以传入一个回调，设置订阅，并在它发生变化时执行它

var Partner = function (nameChangedCallback) {
    var self = this;
    self.name = ko.observable(name);    

    if (typeof nameChangedCallback == "function") {
        self.name.subscribe(function() {
           nameChangedCallback.call(self, self);
        });
    }
};