Knockout Projections

Using a computed observable to filter or project an observable array is an incredibly common operation; I don't think I've ever seen a Knockout project that didn't do this at least once. Knockout Projections is a plugin that adds a map and filter function to observable arrays, which creates a computed observable that only recomputes it's callback on dependent elements that have changed instead of re-evaluating every single dependent element.

Note

Steven Sanderson introduced this plugin via his blog at http://blog.stevensanderson.com/2013/12/03.

To better understand the problem this plugin solves, we are going to look at the example Sanderson uses on his blog to illustrate the differences between a normal computed observable array and an array made with Knockout Projections.

Consider the following model:

function Product(data) {
    this.name = ko.observable(data.name);
    this.isSelected = ko.observable(false);
}
function PageViewModel() {
    // Some data, perhaps loaded...