如何在敲除中的可觀察數組上應用多個過濾器

Question

我的self對象self.taskItems有一個可觀察的數組，我在剔除foreach綁定中使用了該數組來顯示每個任務的內容。

基於某些任務過濾器，我需要更改taskItems的內容，然后單擊清除過濾器時，我需要顯示我的原始內容。

為了實現此功能，我將上面的可觀察數組克隆到了另一個數組中self.taskpanelAllItems(self.taskItems());

問題是，當我從taskItems（）刪除內容時，它是從taskpanelAllItems()克隆數組中刪除內容，如何防止這種情況發生？

在這些情況下最好的工作方式是：克隆原始數組並對其進行修改，或者還有其他方法嗎？

Answer 1

基於某些任務過濾器，我需要更改此taskItems的內容，單擊清除過濾器后，需要顯示我的原始內容。

不要嘗試手動維護第二（克隆）項列表。

相反，您應該設置一個可觀察的過濾器：

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;
    });
});

現在，您可以讓視圖依賴於visibleTaskItems ：

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

現在，每次更改或清除過濾器時，視圖都會相應更新。

Answer 2

self.taskpanelAllItems(self.taskItems());

這不會克隆數組。 它只是將相同的數組分配給另一個可觀察的數組。 您最終得到兩個指向同一數組的可觀察對象。

要克隆數組，您需要專門調用一個函數：

self.taskpanelAllItems(self.taskItems.slice(0));

但是，正如@Tomalak所建議的那樣，使用計算的可觀察值是一種更好的方法，可以清楚地封裝可觀察值之間的關系。