聚合物：在模板的DOM重复

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你可以看到这种方法的一个例子。