更新视图，当可观察数组上的过滤器更改时答案

【问题标题】：Update view, when a filter on observable array changes更新视图，当可观察数组上的过滤器更改时
【发布时间】：2015-07-01 01:34:57
【问题描述】：

我只想显示可观察数组arrayData 中的一个子集使用 ko if 我能够对数据应用过滤器：

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

但是，我不知道如何触发更新视图，当我想更改过滤器时，例如type == 1

如果可能的话？

附注：

目前我将 foreach 与数据副本一起使用，我在模型中清除了结束重置。但是对于这种方法，我需要为模型中的每个过滤器提供一个可观察的数组并进行大量复制

【问题讨论】：

标签： knockout.js

【解决方案1】：

我建议使用 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 指出更新问题的视图部分。在我最初的阅读中完全错过了。

【讨论】：

我非常喜欢使用下划线，有时我没有意识到 ko 也有 utils :)。尽管如此，要使这个成为正确答案，您仍然需要使用另一个可观察对象来比较 type。
是的，我听到了，哈哈。它们绝对很容易忘记，因为它们并没有真正记录在主要的淘汰赛网站上。感谢您指出我错过的要求，我将更新答案以包含该可观察对象。
非常感谢您的回答和宝贵的链接。无法停止阅读所有文章...

【解决方案2】：

将与 type 进行比较的值存储在 observable 中：

self.selectedType = ko.observable();

并根据您的视图模型函数的需要更新其内容。

然后用它来比较：

<!-- 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

【讨论】：

有趣！感谢您提供下划线示例！