Question

angularjs内置了angular-filters概念，因此将数据集简化为匹配例如用户输入的元素非常容易。

knockout.js是否有类似的内容？

当然我可以使用普通的旧Javascript自己实现它，但我不是性能专家，所以我自己的解决方案可能会非常慢。

Answer 1

是的，Steve Sanderson已为淘汰创建了knockout-projections插件。

这类似于 angular-filters ，您可以将地图或过滤器应用于源集合，以生成另一个集合供您绑定到UI。

来自项目 github readme 的此示例演示了用法并解释了map和filter回调如何有效执行：

<强>映射

要了解更多信息。现在，这是一个简单的例子：
var sourceItems = ko.observableArray([1, 2, 3, 4, 5]);
有一个普通的可观察阵列。现在让我们说我们要跟踪这些值的平方：
var squares = sourceItems.map(function(x) { return x*x; });
现在squares是一个包含[1, 4, 9, 16, 25]的可观察数组。让我们修改源数据：
sourceItems.push(6);
// 'squares' has automatically updated and now contains [1, 4, 9, 16, 25, 36]
这适用于源数据的任何转换，例如：
sourceItems.reverse();
// 'squares' now contains [36, 25, 16, 9, 4, 1]
这个库的关键点是这些转换是有效地完成的。具体来说，你执行的回调函数   只有在严格必要时才会调用映射（通常是这样的   仅适用于新增项目）。向源添加新项目时   数据，我们不需要重新映射现有的数据。当你重新订购   在源数据中，输出顺序相应地改为而不是   重新映射任何东西。

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

<强>过滤

除map外，此插件还提供filter：
var evenSquares = squares.filter(function(x) { return x % 2 === 0; });
// evenSquares is now an observable containing [36, 16, 4]

sourceItems.push(9);
// This has no effect on evenSquares, because 9*9=81 is odd

sourceItems.push(10);
// evenSquares now contains [36, 16, 4, 100]
同样，只有严格要求才会调用filter回调必要。重新订购或删除源项目并不需要任何重新过滤 - 输出只是更新以匹配。只有新增源项目必须经过filter回调。

Answer 2

我认为您正在寻找以下功能：ko.utils.arrayMap ko.utils.arrayForEach ko.utils.arrayFilter ko.utils.arrayFirst

您可以在http://www.knockmeout.net/2011/04/utility-functions-in-knockoutjs.html

找到这些以及更多内容

对你有帮助吗？

对于Knockout.js，有类似AngularJS的过滤器吗？

2 个答案: