A Polymer element for providing array filtering/sorting while maintaining data binding/propagation.
HTML
Latest commit 6781368 Oct 5, 2016 @43081j 1.0.2
Permalink
Failed to load latest commit information.
demo
test
.gitignore
README.md
array-filter.html
bower.json
index.html

README.md

<array-filter>

Provides the ability to filter/sort an array and maintain bindings

Install

Simply bower install 43081j/array-filter, then import array-filter/array-filter.html.

Usage

When filtering/sorting arrays, it is difficult to maintain bindings. The array-filter element ensures that bindings and change paths are linked correctly, allowing for a filtered and/or sorted copy of an array to remain fully in sync.

This behaves in a similar way to the core array-selector element but with an emphasis on full array operations rather than simple selection.

    <array-filter
        items="{{items}}"
        filtered="{{filtered}}"
        filter="_filter"></array-filter>

    <iron-list items="{{filtered}}">
        <div>{{item.name}}</div>
    </iron-list>

As in the example, you can see that filtered becomes a fully bound copy of the initial array with our filter applied.

This works very nicely with elements such as iron-list which do not have their own filtering or sorting logic.

Observing child sub-properties

Your sort and/or filter function may depend on a particular property which each child has. If this is the case, you will likely want to trigger a sort/filter when these properties change.

For this reason, you can use the observe propert.

    <array-filter
        items="{{items}}"
        filtered="{{filtered}}"
        observe="name"
        filter="_filter"></array-filter>

In the example, any time the name property of a child changes, the sort and filter state will be recomputed.