如何计算每个过滤器的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/