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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Polymer 2.x - 如何使这个搜索过滤器工作?相关的知识,希望对你有一定的参考价值。

我想在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>
答案

您的许多脚本都必须更改,最重要的是通过升级到基于类的元素。 See the relevant section in the Polymer upgrade guide.这将包括adding a call to super.ready()作为你的ready()功能的第一行

以上是关于Polymer 2.x - 如何使这个搜索过滤器工作?的主要内容,如果未能解决你的问题,请参考以下文章

为什么我在控制台中看到Polymer 2.x app工具箱项目的弃用消息?

在 Polymer.dart 中定义全局过滤器/变压器

如何使后退按钮从第二帧工作到第一帧

如何部署 Polymer dart 应用程序

如何在Polymer 2.0 on-tap功能中传递参数?

如何使用过滤器按钮构建重叠搜索栏