是否有类似AngularJS的Knockout.js过滤器的东西? [英] Is there something like AngularJS' filters for Knockout.js?

问题描述

angularjs 的问题具有

angularjs has the angular-filters concept built-in, so it's very easy to reduce a dataset to those elements that match for example a user-input.

?

Is there something similar available for knockout.js?

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

Of course I could implement it on my own, using plain old Javascript, but I'm not a performance expert so my own solution would probably be horribly slow.

推荐答案

是的，史蒂夫·桑德森已创建了<一个用于剔除的href ="https://github.com/stevesanderson/knockout-projections" rel ="nofollow"> knockout-projections 插件.

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

This is similar to angular-filters where you can apply a map or filter to a source collection to produce another collection for you to bind to the UI.

该项目来自 github自述文件的示例演示了用法，并说明了如何有效执行map和filter回调:

This example from the projects github readme demonstrates usage and explains how the map and filter callbacks are executed efficiently:

映射

更多信息请关注.现在，这是一个简单的示例:

More info to follow. For now, here's a simple example:

var sourceItems = ko.observableArray([1, 2, 3, 4, 5]);

有一个普通的可观察数组.现在说我们要保持追踪 这些值的平方:

There's a plain observable array. Now let's say we want to keep track of the squares of these values:

var squares = sourceItems.map(function(x) { return x*x; });

现在，squares是一个包含[1, 4, 9, 16, 25]的可观察数组.让我们修改源数据:

Now squares is an observable array containing [1, 4, 9, 16, 25]. Let's modify the source data:

sourceItems.push(6);
// 'squares' has automatically updated and now contains [1, 4, 9, 16, 25, 36]

这适用于源数据的任何转换，例如:

This works with any transformation of the source data, e.g.:

sourceItems.reverse();
// 'squares' now contains [36, 25, 16, 9, 4, 1]

该库的关键是要高效地完成这些转换.具体来说，您执行的回调函数 仅在绝对必要时才调用映射(通常，这是 仅适用于新添加的商品).当您向源中添加新项目时 数据，我们不需要需要重新映射现有数据.当您重新订购时 源数据，输出顺序相应地更改无 重新映射任何东西.

The key point of this library is that these transformations are done efficiently. Specifically, your callback function that performs the mapping is only called when strictly necessary (usually, that's only for newly-added items). When you add new items to the source data, we don't need to re-map the existing ones. When you reorder the source data, the output order is correspondingly changed without remapping anything.

如果您只是对数字进行平方，则此效率可能并不重要， 但是当您映射自定义对象的复杂嵌套图时， 对每次映射更新的最小影响可能很重要 工作.

This efficiency might not matter much if you're just squaring numbers, but when you are mapping complex nested graphs of custom objects, it can be important to perform each mapping update with the minumum of work.

过滤

和map一样，此插件还提供filter:

As well as map, this plugin also provides 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回调.

Again, your filter callbacks are only called when strictly necessary. Re-ordering or deleting source items don't require any refiltering - the output is simply updated to match. Only newly-added source items must be subjected to your filter callback.

这篇关于是否有类似AngularJS的Knockout.js过滤器的东西?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！