Question

我有一个项目列表（约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>

每当其中一个过滤器更改时，将重新计算整个filteredItems。因此，当用户设置filter1然后设置filter2时，filter1将应用于100个项目。然后，再次对100个项目应用filter1和filter2。我想知道是否有更有效的方法来应用过滤器？即重复使用先前过滤的结果？

Answer 1

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

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

Answer 2

您可能想要使用Knockout Projections

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

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

如果只是平方数字，效率可能无关紧要，   但是当您映射自定义对象的复杂嵌套图时，它   使用最小值来执行每个映射更新非常重要   工作

如何使用knockoutjs实现有效的过滤器

2 个答案: