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

Question

我想在Polymer 2.x Web应用程序中为元素实现搜索过滤器。 我在下面的Polymer 1.x中有这个代码，我不知道如何在Polymer 2.x中使它工作

如何从下面的Polymer 1.x中创建代码，以处理此Polymer 2.x页面：

my-home.html | script area

  <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

<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()功能的第一行