javascript - Is there something like AngularJS' filters for Knockout.js? -

angularjs has angular-filters concept built-in, it's easy reduce dataset elements match example user-input.

is there similar available knockout.js?

of course implement on own, using plain old javascript, i'm not performance expert own solution horribly slow.

yes, steve sanderson has created knockout-projections plugin knockout.

this similar angular-filters can apply map or filter source collection produce collection bind ui.

this example projects github readme demonstrates usage , explains how map , filter callbacks executed efficiently:

mapping

more info follow. now, here's simple example:

var sourceitems = ko.observablearray([1, 2, 3, 4, 5]); 

there's plain observable array. let's want keep track of squares of these values:

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

now squares observable array containing [1, 4, 9, 16, 25]. let's modify source data:

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

this works transformation of source data, e.g.:

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

the key point of library these transformations done efficiently. specifically, callback function performs mapping called when strictly necessary (usually, that's newly-added items). when add new items source data, don't need re-map existing ones. when reorder source data, output order correspondingly changed without remapping anything.

this efficiency might not matter if you're squaring numbers, when mapping complex nested graphs of custom objects, can important perform each mapping update minumum of work.

filtering

as map, plugin provides filter:

var evensquares = squares.filter(function(x) { return x % 2 === 0; }); // evensquares observable containing [36, 16, 4]  sourceitems.push(9); // has no effect on evensquares, because 9*9=81 odd  sourceitems.push(10); // evensquares contains [36, 16, 4, 100] 

again, filter callbacks called when strictly necessary. re-ordering or deleting source items don't require refiltering - output updated match. newly-added source items must subjected filter callback.