如何使用 knockoutjs 实现高效过滤器答案

【问题标题】：How to implement an efficient filter using knockoutjs如何使用 knockoutjs 实现高效过滤器
【发布时间】：2015-04-24 14:17:55
【问题描述】：

我有一个项目列表（大约 100 个项目），它们显示在一个列表中。还有一项规定可以应用几个过滤器。我正在使用 knockoutJS 进行数据绑定。目前的实现是这样的：

var vmModel = function() {
            var self = this;
            self.items = ko.observableArray([])
            self.filter1 = ko.observable()
            self.filter2 = ko.observable()
            self.filter3 = ko.observable()
            self.filteredItems = ko.computed(function(){
                 var allItems = self.items()
                 if (self.filter1()) {
                     allItems = ko.utils.arrayFilter(allitems, 
                                    function(item) {return "some condition";})}
                 ...
                 Other filters
                 ...
                 }) // end of computed function
            })// end of vmModel

在我的 HTML 中

<ul data-bind="foreach: filteredItems">
    <li data-bind="text: some data"></li>
</ul>

只要其中一个过滤器发生变化，就会重新计算整个过滤项。因此，当用户设置 filter1 然后 filter2 时，filter1 应用于 100 个项目。然后，再次将 filter1 和 filter2 应用于 100 个项目。我想知道是否有更有效的方法来应用过滤器？即重复使用以前过滤的结果？

【问题讨论】：

看来您低估了现代设备的计算能力。唯一可以让事情变得更顺畅的真正功能 - rateLimit-ing 你的 computed (knockoutjs.com/documentation/rateLimit-observable.html)
不要为每个过滤器使用ko.utils.arrayFilter，最好使用一个for循环，然后根据您的过滤器过滤每个项目。这意味着如果应用了多个过滤器，那么仍然只有一个循环遍历所有项目。正如 f_martinez 所说，也可以使用 rateLimiting，但这意味着过滤器不会立即应用，这可能是您不想要的。
@WayneEllery 我想我也在做同样的事情。问题是当您应用第二个过滤器时，会调用相同的循环，然后将 filter1 和 filter2 应用于 vanila 列表项。

标签： javascript knockout.js

【解决方案1】：

KO 只知道您在计算值中使用了多个 Observable 值，但它不知道为什么。我认为您不能指定将代码的特定部分应用于可观察的更改事件。

我认为这样做的唯一方法（但我认为它很难看）是将你的值存储到一个私有变量中（不可观察，只是一个标准的 JS Var）。当调用计算时，您将新变量与最新变量进行比较。如果有不同，则应用过滤器并将新值存储在私有变量上。

【讨论】：

你能解释一下吗，假设 filters1 == items with filter1，那么当我添加另一个过滤器时，我添加过滤器的 filter2 ？ filtersList1 或原始列表项？在这两种情况下，过滤列表 1 和过滤列表 2 都不相同。我也不想逐项比较它们。

【解决方案2】：

您可能想使用Knockout Projections

它提供了高效的地图和过滤功能：

这个库的关键是这些转换是高效完成的。具体来说，执行映射的回调函数仅在绝对必要时才被调用（通常，这仅适用于新添加的项目）。当您向源数据添加新项目时，我们不需要重新映射现有项目。当您重新排序源数据时，输出顺序会相应更改，而无需重新映射任何内容。

如果您只是对数字求平方，这种效率可能并不重要，但是当您映射自定义对象的复杂嵌套图时，它执行每个映射更新的最小值可能很重要工作。

【讨论】：