Polymer 2.x - 如何使这个搜索过滤器工作？

Question

我想为 Polymer 2.x Web 应用程序中的元素实现搜索过滤器。
我在下面有来自 Polymer 1.x 的代码，但我不确定如何让它在 Polymer 2.x 中工作

如何从下面的 Polymer 1.x 制作代码以在此 Polymer 2.x 页面上工作：

我的家.html |脚本区

  <script>
    class Myhome extends Polymer.Element {
      static get is() { return 'my-home'; }
    }

    window.customElements.define(Myhome.is, Myhome);
  </script>

Polymer 1.x 中的搜索过滤器代码：

html

 <div class="app-grid" style="display: flex;">
    <template items="[[data]]">
      <div class="item horizontal wrap layout" style="width: 300px; height: 300px; margin: 2%;">
        <paper-card heading="[[item.title]]" image="http://lorempixel.com/300/200">
           <div class="card-content">[[item.description]]</div>
           <div class="card-actions">
             <paper-button>Button</paper-button>
           </div>
        </paper-card>
      </div>
    </template>
  </div>

脚本

<script>
    Polymer({
      is: 'my-home',
      properties:{
          defaultData:{
            type:Array,
            value:[{title:'Color picture',description:'An RGB picture'},
              {title:'Grey image',description:'That\'s a grey picture'},
              {title:'3',description:'this is content 3'}]
          },
          data:{
            type:Array
          }
        },
        ready:function(){
          this.data = this.defaultData;
          this.$.search.addEventListener('keyup',this.searchChanged.bind(this));
        },
        searchChanged:function(e){
          var querySearch = this.$.search.value.toLowerCase();
          if(querySearch == ''){
            this.data = this.defaultData;
          }else{
            this.data = this.defaultData.filter(function(item){
              return item.title.toLowerCase().indexOf(querySearch) !== -1 || item.description.toLowerCase().indexOf(querySearch)  !== -1;
            });
          }
        }
    });
  </script>

Answer 1

您的许多脚本都必须进行更改，其中最值得注意的可能是升级到基于类的元素。 See the relevant section in the Polymer upgrade guide. 这将包括adding a call to super.ready() 作为ready() 函数的第一行