Dynamic search/filter core-list (Polymer 0.5)

问题

I need to implement a filter-type search which hides items in core list if they do not match the search. I created a .hidden class that is applied to an item if an expression returns false:

class = {{ {hidden: !match(model.host, hQuery)} | tokenList }}

The elements are hidden, but the list does not reflow elements unless I click on a visible row. Is there a way to force a reflow using a function call?

回答1:

After a week of struggling, hiding list items is just not the right way to handle this. Iterate through the original array, push any matching objects to a temporary array, and then replace core-list's .data array with the temporary array: this.$.list_id.data = tmpArray. Performance is good for lists up to 10K records.

回答2:

This is what I'm doing in my code, and it works:

 <div style="{{hide_part1}}">
 ...content to show/hide...
 </div>
 ....

Switching it based on route change(flatron-director):

  routeChanged: function(oldValue, newValue) {

        if ('some_route_1' == this.route) {

            this.hide_part1        = ''
            this.hide_part2    = 'display: none;'

        } else if ('some_route_2' == this.route) {

            this.hide_part1        = 'display: none;'
            this.hide_part2    = ''
       }
   },

Also using core-list's updateSize() and especially scrollToItem(0), i.e. back to top, here and there helps as I also had problems with the 'reflow': https://stackoverflow.com/questions/29432700/polymer-core-list-is-not-rendering-some-of-the-elements

来源：https://stackoverflow.com/questions/29596127/dynamic-search-filter-core-list-polymer-0-5

标签

polymer