0

我有一个简单的 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 上设置多个过滤器？

4

1 回答 1

2

有一种方法可以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')));
  },

在这里你可以看到这个方法的一个例子。

于 2016-12-27T15:50:20.657 回答