重新评估仅依赖于可观察数组的 Knockout 计算

Question

我的 Appmodel 包含一个可观察的 cmets 数组

self.comments=ko.observableArray([]);  // Default Value is an empty array
/*
   Here comes some code to initially fill the observable array 
   with items from an JSON Response
*/

此外，我有两个计算值，它们应该代表第一条评论和最后一条评论

self.firstComment = ko.computed(function () {
    var sorted = self.comments.sort(function (left, right) {
        return left.Id() - right.Id();
    });
    return sorted[0];
});

self.lastComment = ko.computed(function () {
    var sorted = self.comments.sort(function (left, right) {
        return left.Id() - right.Id();
    });
    return sorted[sorted.length - 1];
});

这在初始化应用程序（从服务器加载 JSON，建立 App 模型......）时非常有效，但是当我向数组添加注释时，计算无法识别数组项的数量已更改（据我了解，可观察数组只是观察数组属性本身的可观察对象）。所以当我这样做时：

self.comments.push(aNewCommentObject);

self.lastComment 仍然绑定到数组项，即应用最初加载时的状态。

我发现this blog post 如何通过引入一个虚拟的 observable 来强制计算，但我不喜欢这种方法。那么 observableArray 用于什么目的以及如何使用？

其他挑战：我希望在任何情况下都对 observableArray 项进行排序（因为它是一个应该按时间顺序排序的评论提要）。我尝试使用计算出的commentsSorted 来执行此操作，但也存在当 observableArray 有新项目时它不会更新的问题，所以这里也有同样的问题。这就是为什么我每次都在 firstComment 和 lastComment 中排序的原因。

Answer 1

尝试解开 cmets 以触发 Knockout 的依赖跟踪：

self.firstComment = ko.computed(function () {
    var sorted = self.comments().sort(function (left, right) {
        // -------------------^^ !
        return left.Id() - right.Id();
    });
    return sorted[0];
});

或（相同的东西）：

self.firstComment = ko.computed(function () {
    var sorted = ko.unwrap(self.comments).sort(function (left, right) {
        return left.Id() - right.Id();
    });
    return sorted[0];
});

当然你可以把它抽象成一个单独的计算。

self.commentsSorted = ko.computed(function () {
    return self.comments().sort(function (left, right) {
        return left.Id() - right.Id();
    });
});

self.firstComment = ko.computed(function () {
    return ko.unwrap(self.commentsSorted)[0];
});

由于计算缓存了它们的返回值（就像所有其他 observable 一样），您无需担心多次调用self.commentsSorted。只有当底层的 observable 数组有机会时才会重新计算。

Answer 2

你如何“在任何情况下保持 observableArray 项的排序”？我的建议是不要尝试对原始数组进行排序（我将在下面更详细地描述陷阱），而是使用一个返回一个新的排序数组的计算 observable：

self.commentsSorted = ko.computed(function () {
    return self.comments.slice(0).sort(function (left, right) {
        return left.Id() - right.Id();
    });
});

了解 JavaScript Array sort() 方法的重要一点是它更改了原始数组。 Knockout 的observableArray 包装了许多数组函数，因此可以直接在observableArray 对象上使用它们。这就是您可以使用myObservableArray.sort() 而不必使用myObservableArray().sort() 的原因。但两者并不等价，因为 Knockout 以不同的方式包装了数组 mutator 方法，大致如下：

sort: function (sortFunction) {
    this.valueWillMutate();
    var result = this.peek().sort(sortFunction);
    this.valueHasMutated();
    return result;
}

那么自动更改原来的observableArray有什么问题呢？

1. 很难理解发生了什么。很容易要么不依赖数组，因此在初始化之后永远不会更新，要么不通知更改，从而破坏其他元素获取数组的正确视图。

2. 即使您正确设置了它，您现在也已经创建了一个循环依赖项，因为您拥有在数组更改时更新的内容，然后再次更新数组。尽管 Knockout 当前禁用了此功能以同步更新计算的 observable（但将来可能会改变），但如果使用手动订阅或使用 throttle 选项计算的，它将导致无限递归。

Answer 3

替代解决方案，使用subscribe：

self.comments = ko.observableArray([]);

self.comments.subscribe(function(comments) {
    var sorted = comments.sort(function (left, right) {
        return left.Id() - right.Id();
    });

    self.firstComment(sorted[0]);
    self.lastComment(sorted[sorted.length - 1]);

});