按字符串匹配过滤核心列表元素

Question

简单的过滤器将隐藏 core-list 中与输入的字符串不匹配的任何项目。过滤后的元素会有属性 'hidden'，因此它们不应该带任何 space... 显然有问题，可能 core-list 与它有关。此外，当应用过滤器并向下滚动然后返回时再次显示所有元素：/知道如何使此过滤器与 core-list 一起工作吗？对于此示例，我已将过滤器与每个列表项的名称相匹配。

<script src="https://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="https://www.polymer-project.org/components/core-list/core-list.html">

<my-element></my-element>

<polymer-element name="my-element" attributes="">
  <template>
    <style>
      :host {
        display: block;
      }
      :host core-list {
        margin: 8px 0;
        height: 400px;
        width: 350px;
      }
      :host core-list div {
        border: 1px solid #008000;
      }
    </style>

    <label for="s">Search:</label>
    <input id="s" value="{{ filtervalue }}">

    <core-list id="list" data="{{ arr }}" height="50">
      <template>
        <div hidden?="{{ filtervalue | filter(model) }}">
          Name: {{ model.name }}, Index: {{ index }}, Selected: {{ selected }}
        </div>
      </template>
    </core-list>
  </template>

  <script>
    (function() {
      function genData() {
        var arr = [];
        for (var i = 0; i < 1000; i++) {
          arr.push({
            name: "sample" + i,
            pos: i
          });
        }
        return arr;
      }

      Polymer('my-element', {
        created: function() {
          this.arr = genData();
        },
        ready: function() {},
        filter: function(v, model) {
          if (!v) return false;

          if (model) {
            console.log("v: %o\n%o", v, model.name);
            return model.name.indexOf(v) < 0;
          }
        }
      });
    })();
  </script>
</polymer-element>

Answer 1

这里是答案：

以下是一些有用的过滤器：polymer-filters/filter-startsWith.js

过滤器引用自 Polymer expressions examples。

按字符串匹配过滤核心列表元素

Filter core-list elements by string match

javascript

polymer