Question

我正在研究某些功能，这些功能是jsfiddle的衍生物：http://jsfiddle.net/supercool/0kbmchxe/9/，这对前一个问题给了我很大的帮助。

作为下一步，我希望扩展此功能，以便能够计算每个过滤器的现有结果量，并将这些结果绑定到DOM。

我希望在选择每个过滤器时更新这些值。因此，例如，如果2个结果匹配值＆＃39; white＆＃39;在完整数据集可见时存在，我想显示一个＆＃39; 2＆＃39;在过滤器名称旁边，但是如果另一个过滤器调整此值，我希望它相应地更新。

我认为这就像将值存储在一个可观察对象中一样简单，但我正在努力研究如何使用filters数组中的值查询products数组。

我猜我需要遍历最后一个数组：

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的observable：

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/

如何计算每个过滤器的observableArray中相关结果的数量？

1 个答案: