javascript - 从两个可观察数组中获取计算值

Question

我读了很多线程，没有足够的信息如何计算两个可观察数组并跟踪它们的添加/删除并更新计算的可观察对象，因为现在计算只更新一次并且永远不会改变，而已经有很多变化为那两个人做的。

这里是 JsFiddle

这是它背后的代码:

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

    self.first = ko.observableArray([{
        Id: 1,
        name: "john"
    }, {
        Id: 3,
        name: "steve"
    }, {
        Id: 5,
        name: "roger"
    }]);

    self.second = ko.observableArray([{
        Id: 2,
        name: "laker"
    }, {
        Id: 4,
        name: "don"
    }, {
        Id: 6,
        name: "idiot"
    }]);

    self.both = ko.computed(function () {
        return self.first().concat(self.second());
    });

    self.removePerson = function (v) {
        (self.first().indexOf(v) !== -1) ? ko.utils.arrayRemoveItem(self.first(), self.first()[self.first().indexOf(v)]) : ((self.second().indexOf(v) !== -1) ? ko.utils.arrayRemoveItem(self.second(), self.second()[self.second().indexOf(v)]) : console.log("Item doesnt exist"));
    }
}

ko.applyBindings(new VM());

---

问题

如何在每次更改 first 或 second 后更新 computed？

Answer 1

您的计算没有问题，您的 removePerson 工作不正常。

所以不要在 UI 上看到更改，因为当您使用 ko.utils.arrayRemoveItem 时，它会从底层数组中删除项目，因此 KO 不会知道这些更改，所以它知道不更新计算。

修复它的一种方法是在删除后调用数组上的 valueHasMutated()，这将触发计算的更改。 ( Demo )

或者您可以使用 myObservableArray.remove(someItem) 方法(参见 doc):

self.removePerson = function (v) {
    (self.first().indexOf(v) !== -1) 
    ?  self.first.remove(v) 
    :  self.second.remove(v)
}

演示 JSFiddle.