如何計算每個過濾器的observableArray中相關結果的數量？

Question

我正在研究jsfiddle的一些衍生功能：http://jsfiddle.net/supercool/0kbmchxe/9/，這對我以前的問題給予了很大的幫助。

作爲下一步，我希望擴展此功能，以便能夠計算每個過濾器的現有結果數量並將它們綁定到DOM。

我想這些值更新爲/當選擇每個過濾器。因此，例如，如果在完整數據集可見的情況下存在兩個匹配值「white」的結果，我想在過濾器名稱旁邊顯示一個「2」，但如果另一個過濾器調整了此值，我會喜歡它相應地更新。

我想這是因爲只是存儲在可觀察到的值一樣簡單，但我掙扎於如何與從過濾器陣列值查詢產品陣列。

我猜我需要遍歷數組決賽：

for(i = 0; i < self.filter().length; i++){ 

} 

和查詢每個值對相關過濾：

var whiteCount, 
    blackCount, 
    blueCount; 
if(self.filter()[i].color === "White"){ 
    whiteCount += 1; 
} else if (self.filter()[i].color === "Black") { 
    blackCount += 1; 
} else if (self.filter()[i].color === "Blue"){ 
    blueCount += 1; 
} 

，然後打開可變進可觀察到這將綁定到DOM：

whiteCount: ko.observable(whiteCount); //and so on 

我覺得我要麼真的很接近來解決這個問題，或者我可能遠離最佳解決方案。任何幫助表示讚賞。謝謝。

Answer 1

一種方法是使用一個計算觀察的

var child = this; 
     this.id = ko.observable(data.id); 
     this.color = ko.observable(data.color || undefined); 
     this.price = ko.observable(data.price || undefined) 
     this.checked = ko.observable(false); 
     this.colorCount = ko.computed(function(){ 
      return ko.utils.arrayFilter(self.filter(),function(item){ 
       return item.color == child.color(); 
      }).length; 
     }); 

，並在你的商標達

<label data-bind="text: color, attr: { for: 'color' + id }"></label> 
      <i data-bind="text:colorCount"></i> 

你必須做的價格過濾器類似的東西，小提琴可以在這裏找到 http://jsfiddle.net/0kbmchxe/10/