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}}，但是我将如何将其链接到过滤器 - 换句话说，如何在dom-repeat上设置多个过滤器？

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您可以看到此方法的示例。

聚合物：模板中的多个过滤器dom-repeat

1 个答案: