更新視圖，當可觀察到的陣列上的過濾器改變

我想從可觀察到的陣列arrayData 使用ko if我能夠對數據應用過濾器僅顯示一個子集：更新視圖，當可觀察到的陣列上的過濾器改變

<div class="image-list" data-bind="foreach: arrayData"> 
    <!-- ko if: type == 0 --> 
    viewing only objects with attribute type==0

然而，我不不知道，如何觸發更新視圖，當我想改變過濾器，例如type == 1

如果有可能？

P.S：

目前我使用的foreach與數據的副本，我清楚到底復位模型。但是，對於這種方法，我需要爲模型中的每個過濾器和大量複製的一個可觀察陣列

來源

2015-06-30 Valentin Heinitz

我會推薦使用ko.utils.arrayFilter來抓取你想要顯示的項目。您需要添加一個observable來保存要過濾的值，然後在'arrayFilter'中使用它來更改要顯示的項目。

//ViewModel code below 
var self = this; 
self.selectedType = ko.observable(0); //starts at 0, when it changes it will kick off the 'filtered' computed. 
self.filtered = ko.computed(function(){ 
    return ko.utils.arrayFilter(arrayData, function(item) { 
     if (item.type() == self.selectedType()){ 
      return item; 
     }; 
    }); 
})

這將返回'arrayData'中與'arrayFilter'中定義的條件相匹配的項目列表。然後你的foreach數據綁定只會綁定到這個計算，而不是直接綁定到arrayData。

<div class="image-list" data-bind="foreach: filtered">

你可以閱讀更多有關ko.utils功能在這裏（很多其他的好東西！）： http://www.knockmeout.net/2011/04/utility-functions-in-knockoutjs.html

編輯：感謝connexo您指出的問題的更新視圖部分。完全錯過了我最初的閱讀。

來源

2015-06-30 17:17:11

我是如此使用下劃線我有時候沒有意識到ko有utils太:)。儘管如此，爲了使這個正確的答案，你仍然需要涉及另一個observable來比較'type'。 – connexo

是的，我聽到你哈哈。他們肯定很容易忘記，因爲他們並沒有真正記錄在主要的Knockout網站上。感謝您指出我錯過的要求，我會更新答案以包含該可觀察項。 –

非常感謝您的答案和寶貴的鏈接。無法停止閱讀所有文章... –

店與您可觀察比較type值：

self.selectedType = ko.observable（）;

並在您的viewmodel函數中更新其內容以滿足您的需求。

然後用它來比較：

<!-- ko if: type == selectedType() -->

如果你可以使用下劃線，你也可以直接應用其過濾到您的foreach綁定：

<div class="image-list" data-bind="foreach: _.filter(arrayData, function() { return type== $root.selectedType() })">

var evens = _.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });

=> [2, 4, 6]

http://underscorejs.org/#filter

來源

2015-06-30 17:10:35 connexo

有趣！感謝您提供下劃線示例！ –

更新視圖，當可觀察到的陣列上的過濾器改變

回答

相關問題