Polymer：模板中的多个过滤器 dom-repeat

Question

我有一个简单的dom重复这样的：

<template is="dom-repeat" items="{{projects}}" as="project" filter="{{computeFilter(searchString)}}">
[[project.name]] - [[project.number]]
</template>

<paper-input name="filter-name" label="Filter by project name" value="{{searchString}}"></paper-input>

还有一个按名称过滤项目的功能：

computeFilter: function(keyword) {
  if (!keyword) {
    return null;
  } else {
    keyword = keyword.toLowerCase();
    return function(project) {
      var name = project.name.toLowerCase();
      return (name.indexOf(keyword) != -1);
    };
  }
}

一切顺利。现在，如果我还想按项目编号进行筛选，我将如何添加另一个筛选器？

我会有另一个纸质按钮绑定到 {{searchString2}}，但是我如何 link 将其绑定到过滤器 - 换句话说，我如何在 [=21] 上设置多个过滤器=]-重复？

Answer 1

有一种方法可以使用多个过滤器来过滤 dom-repeat。

首先，这是模板：

<paper-input name="filter-name" label="Filter by project name" value="{{filterText::input}}"></paper-input>
<paper-input name="filter-name" label="Filter by project type" value="{{filterText2::input}}"></paper-input>
<template id="resultList" is="dom-repeat" items="{{ projects }}" filter="filterProject" as="project">
  <div>
    [[project.name]] - [[project.number]]
  </div>
</template>

您必须为每个过滤器定义一个观察者来刷新过滤器：

this.$.resultList.render();

然后，您必须在过滤器中使用过滤器函数：

filterProject: function(item) {
    return (this.filterText && item.name.match(new RegExp(this.filterText, 'i'))) || 
      (this.filterText2 && item.name.match(new RegExp(this.filterText2, 'i')));
  },

Here你可以看到这个方法的例子。

Polymer：模板中的多个过滤器 dom-repeat

Polymer: multiple filters in template dom-repeat

filter

polymer

dom-repeat