javascript - ViewModel 内存泄漏 - 摆脱循环依赖

Question

我有一个位于 observableArray 中的 knockout.js subview 模型，它依赖于其父 View 模型中的一个 observable。父级的 observable 绑定(bind)到 select 下拉列表，子级需要知道该值何时更改。

我已经传递了整个父 View 模型，只有 observable，并且还在父级内部订阅了 observable，以便“手动”更新子级。所有这些都用于绑定(bind)目的。

问题是，如果我随后清除子 observableArray 为新 child 腾出空间，或者简单地用新 child 替换 child ，旧 child 会留在内存中，因为它们仍然被引用通过 knockout.js 设置的反向依赖。

我愿意接受不同的设计模式或告诉 knockout 停止依赖依赖的方法。在另一个示例中，我尝试了 cleanNode() 但似乎并没有清除这些反向依赖项。

代码:

function FamilyViewModel(name) {
    this.name = name;
    this.children = ko.observableArray();
}

function ChildViewModel(firstName, lastName, selectedFamilyObservable) {
    this.firstName = ko.observable(firstName);
    this.lastName = ko.observable(lastName);
    this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();
    }, this);
    this.isSelected = ko.computed(function() {
        return selectedFamilyObservable().name == this.lastName();
    }, this);
}

function PageViewModel() {
    this.families = ko.observableArray([
            new FamilyViewModel("Smith"),
            new FamilyViewModel("Jones"),
            new FamilyViewModel("Brown")
            ]);
    this.selectedFamily = ko.observable();
    this.addChild = _.bind(function() {
        this.selectedFamily().children.push(new ChildViewModel("Frank", this.selectedFamily().name, this.selectedFamily));
    }, this);
    this.resetChildren = _.bind(function() {
        this.selectedFamily().children([]);
    }, this);
}

$(function() {
    ko.applyBindings(new PageViewModel());
});

fiddle :

http://jsfiddle.net/cygnl7/xhzkC/1/

Answer 1

查看我的评论，因为我认为它们会对您有所帮助。

我对你的 fiddle 做了一些改动。我不太明白为什么要包含下划线，因为它不需要绑定(bind)事件。此外，您的 childViewModel 和 familyViewModel 实际上都只是模型。 family 的 isSelected 属性只是一个额外的绑定(bind)，这意味着每次更改 selectedFamily 时，您都必须出去并进行其他更新。最后，如果您只想为 selectedFamily 重置子项，只需删除 ko.utils.arrayForEach 函数并执行 selectedFamily().children([]);我不确定您为什么只想重置选定的家庭 child ，但这很容易做到。

需要代码-

 var addChild = function () {
      self.selectedFamily().push(new childModel(self.selectedFamily().name());
 };

http://jsfiddle.net/xhzkC/2/