javascript - 如何在 knockout 中对可观察数组应用多个过滤器

Question

我的 self 对象中有一个可观察数组，self.taskItems，我在 knockout foreach 绑定(bind)中使用它来显示每个任务的内容。

基于一些任务过滤器，我需要更改taskItems的内容，然后当单击清除过滤器时，我需要显示我的原始内容。

为了实现此功能，我将上述可观察数组克隆到另一个数组中 self.taskpanelAllItems(self.taskItems());

问题是，当我从 taskItems() 中删除内容时，它会从 taskpanelAllItems() 中的克隆数组中删除内容，如何防止这种情况发生？

在这些情况下工作的最佳方法是什么:克隆原始数组并修改它，或者还有其他方法吗？

Answer 1

Based on some task filters I need to change this taskItems contents, when clear filters is clicked, I need to show my original content.

不要尝试手动维护第二个(克隆的)项目列表。

相反，您应该设置一个可观察的过滤器:

self.filter = ko.observable();

和计算出的:

self.visibleTaskItems = ko.computed(function () {
    var filterValue = self.filter();
    return ko.utils.arrayFilter(self.taskItems(), function (taskItem) {
        // some sort of filter condition
        return !filterValue || taskItem.title().indexOf(filterValue) > - 1;
    });
});

现在您可以让您的 View 依赖于 visibleTaskItems:

<ul data-bind="foreach: visibleTaskItems">
  <li data-bind="text: title">
</ul>

现在，每次您更改或清除过滤器时，您的 View 都会相应更新。